Tispim.com - Membuat scrollbar Indikator menggunakan JavaScript. Hello sob, ketemu lagi dengan saya di blog TipsIM.com. Pada postingan kali ini saya akan memberikan sebuah tourial bagaimana caranya membuat animasi proses scrollbar / page scroll indikator / progress bar di atas halaman blog.
Sedikit penjelasan mengenai Page Scroll Indikator atau progress scrollbar merupakan suatu indikator atau tanda yang menunjukkan bahwa suatu objek telah bergerak. Nah, pada tutorial ini scrollbar yang saya bagikan yaitu scrollbar horizontal yang terletak di atas header (atau dimanapun sesuai selera letak pemasangan). Scrollbar ini berfungsi untuk menunjukkan seberapa jauh halaman blog digeser ke bawah maupun ke atas.
Scrollbar horizontal ini selain mempercantik tampilan blog juga dapat bermanfaat untuk menunjukkan seberapa jauh pergeseran halaman blog dari atas ke bawah atau sebaliknya. Bagaimana cara memasangnya? Silahkan simak langkah-langkahnya di bawah ini.
Cara Membuat Scrollbar Indicator Horizontal di Blog
1. Silahkan copy kode HTML berikut ini dan pastekan di atas <header>atau di bawah <body>.
<div id="TIMscrollbar">
<div id="TIMscrollbar-bg"></div>
</div>
2. Lalu copy kode CSS berikut ini dan pastekan di atas </head>.
<style type='text/css'>
#TIMscrollbar {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 0%;
height: 4px;
z-index: 9999;
}
#TIMscrollbar-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#F62869;
}
</style>
3. Kemudian yang terakhir, copy kode JavaScript berikut ini dan pastekan di atas </body>
<script type="text/javascript">
//<![CDATA[
//TipsIM.com -- Progress Scrollbar --
var bar_bg = document.getElementById("TIMscrollbar-bg"),
body = document.body,
html = document.documentElement;
bar_bg.style.minWidth = document.width + "px";
document.getElementsByTagName("body")[0].onresize = function() {
// Update the gradient width
bar_bg.style.minWidth = document.width + "px";
}
window.onscroll = function() {
// Change the width of the progress bar
var bar = document.getElementById("TIMscrollbar"),
dw = document.documentElement.clientWidth,
dh = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight ),
wh = window.innerHeight,
pos = pageYOffset || (document.documentElement.clientHeight ?
document.documentElement.scrollTop : document.body.scrollTop),
bw = ((pos / (dh - wh)) * 100);
bar.style.width = bw + "%";
}
//]]>
</script>
4. Setelah semuanya terpasang, silahkan simpan templatenya dan lihat hasilnya dengan cara menscroll halaman blog anda ke bawah ke atas sambil melihat garis di atas header akan berjalan secara otomatis mengikuti halaman yang anda scroll.
Kurang jelas? Silahkan lihat DEMOnya.
Oke, demikian postingan saya mengenai Progress Scrollbar yang dibuat menggunakan JavaScript. Semoga bermanfaat bagi kita semua. Terima kasih sudah meluangkan waktunya untuk berkunjung dan membaca postingan dari blog Tipsim.
Salam Blogger.
Post a Comment:
Komentar, kritik dan saran dari anda adalah motivasi untuk berkembangnya blog ini. Mohon tidak berkomentar dengan kata yang mengandung unsur sara, kekerasan, dan porn. Terima kasih. :)