Cara Menciptakan Scroll Loading Kafe Keren Di Blogger
Cara Membuat Scroll Bar Css di Blogger - Apa teman melihat loading bar pada bab ata website galihdesign ketika scroll atau gulir halaman kebawah? Tampilan tersebut biasa disebut Scroll Bar.
Scroll Bar akan terlihat efeknya ketika kita menggulir (scroll) halaman web kearah bawah atau keatas. Maka akan muncul imbas mirip persentase loading (memuat).
Cari tag </head> kemudian tambahkan arahan Css berikut ini sempurna diatasnya.
Langkah terakhir yakni memasang arahan HTML untuk memanggil Proggress Bar. Cari tag <body> dan letakkan arahan berikut sempurna dibawahnya.
Scroll Bar akan terlihat efeknya ketika kita menggulir (scroll) halaman web kearah bawah atau keatas. Maka akan muncul imbas mirip persentase loading (memuat).
Cara Membuat Scroll Loading Bar Keren di Blogger
Masuk ke Blogger > Tema > Edit HTML.
Cari tag </body> kemudian tambahkan arahan berikut ini sempurna 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> kemudian tambahkan arahan Css berikut ini sempurna 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 yakni memasang arahan HTML untuk memanggil Proggress Bar. Cari tag <body> dan letakkan arahan berikut sempurna dibawahnya.
<div id="scrollLine"></div>
