Scroll Progress Bar
 |
| zoneamedia.blogspot.com |
Script JavaScript yang digunakan untuk menampilkan scrollbar pada halaman web. Script ini akan mendengarkan peristiwa "scroll" yang terjadi pada halaman dan memanggil fungsi "scrollZoneamedia" ketika peristiwa tersebut terjadi. Fungsi ini akan menghitung persentase halaman yang telah di-scroll dan mengatur lebar elemen dengan ID "scrollbar-ZoneAmedia" sesuai dengan persentase yang dihitung, sehingga memberikan tampilan scrollbar yang akan terisi saat pengguna menycroll ke bawah halaman.
Elemen HTML yang digunakan sebagai wadah untuk progress bar yang dibuat oleh kode JavaScript. Elemen ini berupa "div" dengan class "ZoneAmedia-progress-bar" dan ID "scrollbar-ZoneAmedia". Lebar elemen ini akan diatur sesuai dengan persentase halaman yang telah di-scroll, memberikan tampilan progress bar yang akan terisi saat pengguna menycroll ke bawah halaman.
CSS yang digunakan untuk merapikan elemen dengan class "ZoneAmedia-progress-bar" yang merupakan wadah dari progress bar yang dibuat oleh kode JavaScript. CSS ini mengatur warna latar, posisi, dan transisi. sehingga memberikan tampilan progress bar dengan posisi tetap di atas layar, warna latar gradien dan transisi halus saat perubahan lebar.
Berikut ini adalah kode HTML, JavaScript, dan CSS untuk membuat progress scroll bar di web:
1. HTML
Ini adalah kode HTML yang membuat elemen "div" dengan class "ZoneAmedia-progress-bar" dan ID "scrollbar-ZoneAmedia". Elemen ini digunakan sebagai wadah untuk progress bar yang dibuat oleh kode JavaScript yang saya jelaskan sebelumnya. Lebar elemen ini akan diatur sesuai dengan persentase halaman yang telah di-scroll, memberikan tampilan progress bar yang akan terisi saat pengguna menycroll ke bawah halaman.
<div class="ZoneAmedia-progress-bar" id="scrollbar-ZoneAmedia"></div>
2. JavaScript
Script ini adalah JavaScript yang mendengarkan peristiwa "scroll" pada halaman web dan memanggil fungsi "scrollZoneamedia" ketika peristiwa tersebut dipicu. Fungsi ini menghitung persentase halaman yang telah di-scroll dan mengatur lebar elemen dengan ID "scrollbar-ZoneAmedia" sesuai dengan persentase yang dihitung. Efeknya adalah menampilkan scrollbar pada halaman yang akan terisi saat pengguna menycroll ke bawah.
window.addEventListener("scroll",scrollZoneamedia);
function scrollZoneamedia(){
var winScroll=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
var scrolled=(winScroll/height)*100;
document.getElementById("scrollbar-ZoneAmedia").style.width=scrolled+"%";
}
3. CSS
Ini adalah kode CSS yang merapikan elemen dengan class "ZoneAmedia-progress-bar", yang merupakan wadah untuk progress bar yang dibuat oleh kode JavaScript.
.ZoneAmedia-progress-bar{
background:linear-gradient(90deg,#ff0005 10%,#d81fef 90%);
opacity:.95;
position:fixed;
top:0;
left:0;
height:3px;
z-index:999;
transition:all .4s cubic-bezier(.47,1.64,.41,.8);
}
- Ini mengatur warna latar elemen menjadi gradien linear dari dua warna, dimulai dengan #ff0005 pada 10% dan diakhiri dengan #d81fef pada 90%.
- Ini mengatur kepekaan elemen menjadi 0,95
- Ini mengatur posisi elemen menjadi tetap, sehingga tetap berada di bagian atas layar saat pengguna menycroll.
- Ini mengatur properti atas dan kiri menjadi 0, sehingga elemen disesuaikan dengan pojok kiri atas layar.
- Ini mengatur tinggi elemen menjadi 3px
- Ini mengatur z-index menjadi 999, sehingga elemen muncul di atas elemen lain pada halaman.
- Ini mengatur properti transisi, sehingga perubahan elemen akan dianimasikan dengan halus selama 0,4 detik, menggunakan fungsi cubic-bezier.
Styles memberikan posisi tetap pada progress bar di bagian atas layar, warna latar gradien, dan transisi halus saat perubahan lebar.
Kesimpulan dari topik pembahasan di atas adalah bahwa terdapat sebuah script JavaScript, elemen HTML dan CSS yang digunakan untuk menampilkan scrollbar pada halaman web. Script JavaScript akan mendengarkan peristiwa "scroll" yang terjadi pada halaman dan memanggil fungsi "scrollZoneamedia" untuk menghitung persentase halaman yang telah di-scroll.
Kemudian elemen HTML digunakan sebagai wadah untuk progress bar yang dibuat oleh kode JavaScript, yang akan diatur lebar nya sesuai dengan persentase halaman yang telah di-scroll. CSS digunakan untuk merapikan tampilan dari elemen HTML tersebut, sehingga memberikan tampilan scrollbar dengan posisi tetap di atas layar, warna latar gradien dan transisi halus saat perubahan lebar.