Membuat Scroll Indikator Dengan HTML, CSS Dan Java Script
Hai semuanya, pada tutorial kali ini kita akan belajar membuat scroll indicator dengan HTML, CSS dan Java Script, agan mau tau cara buatnya, yuk kita langsung mulai belajar membuat scroll indicator.
Bagi anda yang ingin mendownload source code dari tutorial ini, anda dapat mendownloadnya pada link dibawah ini.
Pertama, tulis syntax HTML seperti dibawah ini.
<header>
<nav>
<a href="">Kode Kuliahan</a>
<div class="left">
<a href="">Home</a>
<a href="">Blog</a>
<a href="">About</a>
<a href="">Contact</a>
</div>
</nav>
<div class="progress">
<div class="progress-indicator" id="scroll-bar"></div>
</div>
</header>
<article>
<p>
<h1>Perbedaan Front End, Back End Dan Full Stack Developer</h1>
<hr>
<h1>Front End</h1>
Jadi apa yang dimaksud dengan Front-end? Front-end merupakan bagian daru suatu website yang pengguna bisa dan dapat di interaksi secara lanngsung, Front-end terdiri dari HTML, CSS, dan JavaScript. HTML (HyperText Markup Language) merupakan penompang dasar suatu website, semua website yang akmu kunjungi dibuat dengan HTML. HTML menangani semua struktur yang ada di website tersebut walaupun situs yang dibuat dengan versi yang lama masih berjalan dengan lancar dengan browser Anda.....
</p>
<p>
<h1>Back-End</h1>
Dimana Front-end menangani semuanya yang berkaitan interaksi langsung pengguna, back-end seperti namanya lebih mengerjakan di behind-the-scenes dan mempunyai keunggulan lebih daripada teknologi front-end untuk projek yang lebih spesifik. Bahasa program Back-end terdiri dari PHP, Ruby, Phython dan lainnya....
</p>
<p>
<h1>Full-Stack</h1>
Developer full-stack bekerja di front dan back end suatu website, mereka mengathui cara kerja HTML, CSS, JavaScript dan satu atau mungkin lebih bahasa program back-end. Seiring waktu berjalan apa yang bisa dilakukan dengan menggunakan bahasa program front dan back end menjadi lebih mirip dan susah dibedakan, dan dimana suatu masalah dulu hanya bisa diatasi dengan menggunakan back end, sekarang menjadi tidak mustahil bila menggunakan front-end,As the line developer menjadi apa yang kita sebut “full stack.” banyak pekerja (terutama agency yang menggunakan berbagai website) mencari developer yang tahu bagaimana cara kerja semua bagian di website tersebut....
</p>
<h2>Sumber Artikel</h2>
<a href="https://beyonder.asia/apa-perbedaan-dari-front-end-back-end-full-stack-developer/">
https://beyonder.asia/apa-perbedaan-dari-front-end-back-end-full-stack-developer/
</a>
</article>
header{
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
display: table;
clear: both;
background-color: #282828;
}
nav{
width: 90%;
margin: auto;
}
nav a{
display: inline-block;
padding: 20px 10px;
text-decoration: none;
color: #fff;
}
.left{float: right;}
.progress{
width: 100%;
height: 4px;
background-color: #ccc;
}
.progress-indicator{
width: 0%;
height: inherit;
background-color: #1b9dc6;
}
article{
width: 80%;
margin: 100px auto 0;
text-align: justify;
}
// ketika halaman discroll jalankan fungsi scrollIndicator()
window.onscroll = function(){scrollIndicator();}
function scrollIndicator(){
let pageScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scroll = (pageScroll / height) * 100;
document.getElementById('scroll-bar').style.width = scroll + "%";
}
Jadi, ketika kita scroll halamannya kebawah, maka scroll indicatornya yang berwarna biru akan berjalan, dapat dilihat gambar dibawah ini.
Seperti yang kita lihat pada gambar diatas ini, indicator scrollnya berjalan.
Demikian, tutorial cara membuat scroll indicator dengan HTML, CSS dan Java Script, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tulis komentar anda pada kolom komentar dibawah ya, terima kasih.
Semoga Bermanfaat.
