Cara Membuat Scroll Loading Bar Keren di Blogger
Cara Membuat Scroll Bar Css di Blogger - Apa sobat melihat loading bar pada bagian ata website galihdesign saat scroll atau gulir halaman kebawah? Tampilan tersebut biasa disebut Scroll Bar.
Scroll Bar akan terlihat efeknya saat kita menggulir (scroll) halaman web kearah bawah atau keatas. Maka akan muncul efek mirip persentase loading (memuat).
Cari tag </head> lalu tambahkan kode Css berikut ini tepat diatasnya.
Langkah terakhir adalah memasang kode HTML untuk memanggil Proggress Bar. Cari tag <body> dan letakkan kode berikut tepat dibawahnya.
Scroll Bar akan terlihat efeknya saat kita menggulir (scroll) halaman web kearah bawah atau keatas. Maka akan muncul efek mirip persentase loading (memuat).
Cara Membuat Scroll Loading Bar Keren di Blogger
Masuk ke Blogger > Tema > Edit HTML.
Cari tag </body> lalu tambahkan kode berikut ini tepat diatasnya.
<script type='text/javascript'>//<![CDATA[let scrollBar=document.querySelector("#scrollLine");function fillProgressBar(){let viewportHeight=window.innerHeight;let fullHeight=document.body.clientHeight;let scrollHeight=window.scrollY;let percentScrolled=(scrollHeight/(fullHeight-viewportHeight))*100;scrollBar.style.width=`${percentScrolled}%`}
window.addEventListener("scroll",debounce(fillProgressBar));function checkPosition(){let headers=document.querySelectorAll('h1');headers.forEach(header=>{let scrolling=window.scrollY+window.innerHeight;let headerHeight=header.offsetTop+30;if(scrolling>headerHeight){header.classList.add("in")}
else{header.classList.remove("in")}});let paragraphs=document.querySelectorAll('p');let count=0;paragraphs.forEach(paragraph=>{let scrolling=window.scrollY+window.innerHeight;let paragraphHeight=paragraph.offsetTop+30;if(scrolling>paragraphHeight){paragraph.classList.add("in")}
else{paragraph.classList.remove("in")}})}
document.addEventListener("DOMContentLoaded",debounce(checkPosition));window.addEventListener("scroll",debounce(checkPosition));function debounce(func,wait=15,immediate){var timeout;return function(){var context=this,args=arguments;var later=function(){timeout=null;if(!immediate)func.apply(context,args)};var callNow=immediate&&!timeout;clearTimeout(timeout);timeout=setTimeout(later,wait);if(callNow)func.apply(context,args)}}
//]]></script>
Cari tag </head> lalu tambahkan kode Css berikut ini tepat diatasnya.
<style type='text/css'>
#scrollLine{
background-color:#f44336;
background-color:#f44336;
background-image: linear-gradient(to top left, #ef5350 0%, #d32f2f 100%);
height:2px;
position:fixed;
top:0;
left:0;
//width:100%;
transition:0.05s ease-in all;
margin-bottom: 1em;
z-index:1000;
}
</style>
Langkah terakhir adalah memasang kode HTML untuk memanggil Proggress Bar. Cari tag <body> dan letakkan kode berikut tepat dibawahnya.
<div id="scrollLine"></div>
Komentar
Posting Komentar
Mohon untuk menggunakan bahasa yang baik dan benar.