Cara Membuat Scroll Progress Bar Dengan jQuery
Hallo rekan-rekan, bertemu kembali pada pembahasan seputar situs. Pada kesempatan kali ini kita akan belajar cara membangun Scroll Progress Bar dengan jQuery. Jadi dikala kita sedang mengunjungi halaman situs tak dapat melihat keseluruhan detailnya. Nah tentu mesti kita scroll secara naik turun atau kesamping. Pada kasus ini kita akan menampilkan progress bar dikala menjalankan scroll, bagaimana cara membuatnya yuk simak strategi membuatnya.
Langkah Pertama-tama
Silahkan siapkan file html yang berisi seperti code dibawah ini:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Merancang Scroll Progress Bar Dengan jQuery</title>
<link rel=stylesheet href=style.css>
</head>
<body>
<div id=p-bar></div>
<div class=wrapper>
<!-- silahkan bikin 5 paragrap kemudian isi paragrap menggunakan text dummy dari lorem ipsum -->
<p>lorem ipsum......</p>
</div>
</body>
</html>
Langkah Kedua
Seandainya telah membangun file html seperti diatas tambahkan style CSS seperti berikut:
*{margin:0;padding: 0;box-sizing: border-box;}
.wrapper{
padding:50px 100px;
background: #e1dfdf;
}
h3{margin-bottom: 10px;color:#000000;font-size: 30px;}
p{color:#000;font-size: 20px;margin-bottom: 10px;}
::-webkit-scrollbar{width: 0;}
#p-bar{
position: fixed;
top:0;
width: 10px;
background: linear-gradient(to top, #ff0202, #1d21fd, #ffe300, #16ff02);
}baiklah seandainya telah mengetikkan code CSS berikutnya menyisipkan library dan script jQuery didalam file HTML seperti dibawah ini:
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js></script>
<script>
$(window).scroll(function(){
var rollbar = $(window).scrollTop(),
dh = $(document).height(),
wh = $(window).height();
scrollPercent = (rollbar / (dh-wh)) * 100;
$('#p-bar').css('height', scrollPercent + '%');
})
</script>
kini simpan file diatas lalu jalankan di browser masing-masing, kemudian lihat hasilnya akan seperti tampilan berikut:
Demikian pembahasan kali ini mengenai Cara Merancang Scroll Progress Bar Dengan jQuery, semoga bermanfaat dan hingga jumpa dengan pemabhasan lainnya.
terima kasih.
Sumber https://kursuswebsite.org
