Animasi Gradient Scroll Bar Navigasi Atas Header

agung wisudhatama March 09, 2022 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Animasi Gradient Scroll Bar Navigasi Header

Mempercantik blog bisa dilakukan dengan berbagai cara. Salah satunya dengan menggunakan cara mempercantik bagian atas navigasi blog diatas header.

Tampilan yang nanti akan terlihat adalah bagian atas sendiri dari header atau yang menempel pada Toolbar Browser bawah adalah garis berwarna dan ketika kita scroll halaman ke bawah maka akan membentuk animasi.

Baca Juga : Membuat ScrollBar Persen dengan CSS

Animasi yang dimaksud adalah animasi garis yang akan membentang ke kanan sejajar dari arah kiri. Semakin kebawah kita scroll halaman, maka garis itu akan semakin ke kanan dan memanjang.

Keunikan dari trik ini sudah banyak digunakan oleh sebagian blogger. Karena keindahan warna gradient (pelangi, red) membuat pandangan mata menjadi sejuk ketika memandangnya. Unik khan?

Baca Juga : Membuat Dropcap Huruf Awal Pertama Besar

Cara yang akan kita pergunakan disini adalah menggunakan HTML sebagai pemanggil, CSS sebagai support memperindah tampilan, dan Javascript untuk membuat animasi gradient scroll bar nya.

Oke guys sekarang kita mulai saja tutorial kali ini. Sudah suntuk menunggu khan? Yuk kita praktekkan cara pertama hingga akhir nanti. Kerjakan sama-sama ya. Biar blog kita nanti jadi bagus.

Animasi Gradient Scroll Bar Navigasi Atas Header

Langsung masuk ke Dashboard Blogger, pilih Tema, klik Sesuaikan : Edit HTML

HTML

Tempelkan kode dibawah ini dibawah kode </head>

<div id='top-scrollbar'>
<div id='top-scrollbar-bg'>
</div>
</div>

CSS

Kemudian cari lagi kode ]]></b:skin>. Kemudian tempelkan kode dibawah ini diatas kode ]]></b:skin>.

#top-scrollbar {position: fixed;top: 0;left: 0;width: 0%;height: 6px;overflow: hidden;z-index: 99999;}
#top-scrollbar-bg {width: 100%;height: 100%;position: absolute;
background-image:linear-gradient(96deg, rgba(236,90,90,1) 15%, rgba(220,236,21,1) 50%, rgba(226,115,10,1) 85%);}

Javascript

Terakhir cari kode </body>. Terus taruh kode dibawah ini tepat persis diatas kode </body>. Pelan-pelan ya nyarinya soalnya template blog itu codenya banyak jadi bisa bikin puyeng.

<script>
//<![CDATA[
var bar_bg = document.getElementById("top-scrollbar-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("top-scrollbar"),
        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>

Setelah semua dilakukan coba kalian pratinjau dulu. Setelah di preview dan berhasil. Silakan kalian simpan Templatenya. Dan kemudian refresh halaman blog kalian. Pasti sudah ada itu animasi gradient scroll bar di atas header. Semakin indah dipandang mata bukan. Terima kasih ya yang sudah mau mampir di blog ini dan mau membaca artikel Animasi Gradient Scroll Bar Navigasi Atas Header. Silakan dipraktekkan dan semoga berhasil. Sekalian lihat contohnya dibawah sudah saya praktekkan.

Result

Bagikan ke teman-teman kamu

Label Postingan : Javascript

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Animasi Gradient Scroll Bar Navigasi Atas Header . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.