Beberapa hari lalu dari artikel ini publish, gua ada kebutuhan untuk menggunakan plugin javascript untuk handle one page scroll pada halaman website.
Kemudian, mulailah gua browsing plugin yang sekiranya cocok dengan kebutuhan gua.
Gua mencoba mencarinya di halaman website https://www.jqueryscript.net/. Menurut gua, website itu adalah website yang cocok apabila kita ingin mencari plugin javascript. Plugin yang tersedia cukup lengkap, dokumentasinya juga mudah dipahami plus terdapat demo untuk melihat preview ketika kita implementasi plugin tersebut.
Kemudian, lanjut lah gua mencari plugin tersebut dengan keyword “one page scroll” pada kotak pencarian. Dari hasil pencarian, ternyata ada lumayan banyak plugin one page scroll. Gua sempat mencoba beberapa plugin dari hasil pencarian tersebut, tapi gua masih belum menemukan plugin yang cocok dengan kebutuhan gua. Seperti, kurang responsive pada browser mobile, pluginnya yang berbayar, hingga masih ada nya bug pada plugin yang gua coba.
Akhirnya, gua tertarik untuk akses salah satu hasil pencarian tadi, yang mana bentuk nya adalah blog, dengan judul “10 Best Mobile-friendly One Page Scroll Plugins (2024 Update)”. Intinya, blog tersebut memberikan 10 rekomendasi plugin one page scroll yang support mobile browser.
Setelah gua mencoba beberapa plugin dari rekomendasi blog tersebut, akhirnya gua menemukan plugin one page scroll yang cocok untuk gua gunakan, yaitu docSlider.js.
Kenapa gua merasa cocok dengan plugin ini?
Apabila kalian juga ingin mencoba plugin docSlider.js ini, silahkan kalian akses link disini https://www.cssscript.com/one-page-scroll-slider/ untuk melihat dokumentasi singkatnya. Nah, untuk dokumentasi lebih lengkap nya, bisa kalian akses disini https://prjct-samwest.github.io/docSlider/document.html.
Berikut gua coba kasih contoh kodingan simple cara implementasi docSlider.js ini. Untuk penjelasannya, gua coba sisipkan di tiap baris kodingan dalam bentuk komentar ya.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- load file css dari docSlider.js, bisa menggunakan link cdn seperti dibawah ini
atau download file nya ke dalam directory project kalian, lalu load dari directory project kalian
untuk download library nya bisa dari link ini https://prjct-samwest.github.io/docSlider/document.html -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docslider@3.0.1/docSlider.min.css">
<title>Rekomendasi Plugin One Page Scroll by Kuhomi.id</title>
<!-- styling untuk set image bacground dan caption text di setiap session.
Styling ini hanya untuk contoh, silahkan disesuaikan dengan antarmuka yang kalian inginkan -->
<style>
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.65;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/*SET IMAGE BACGROUND TIAP SESSION : START*/
.bgimg-1 {
background-image: url("https://images.unsplash.com/photo-1496181133206-80ce9b88a853?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
height: 100%;
}
.bgimg-2 {
background-image: url("https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
height: 100%;
}
.bgimg-3 {
background-image: url("https://images.unsplash.com/1/work-station-straight-on-view.jpg?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
height: 100%;
}
/*SET IMAGE BACGROUND TIAP SESSION : END*/
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
</style>
</head>
<body>
<!-- buat div dengan nama class "docSlider"
untuk nama class div ini, harus docSlider ya sesuai dengan dokumentasi docSlider.js -->
<div class="docSlider">
<!-- definisikan antarmuka setiap section
silahkan kalian sesuaikan dengan antarmuka yang kalian inginkan ya -->
<section>
<!-- silahkan definisikan kodingan antarmuka yang kalian inginkan-
di dalam tag section ini -->
<div class="bgimg-1">
<div class="caption">
<span class="border">FULL PAGE</span><br>
<span class="border">SECTION SATU</span>
</div>
</div>
</section>
<section>
<!-- silahkan definisikan kodingan antarmuka yang kalian inginkan-
di dalam tag section ini -->
<div class="bgimg-2">
<div class="caption">
<span class="border">FULL PAGE</span><br>
<span class="border">SECTION DUA</span>
</div>
</div>
</section>
<section>
<!-- silahkan definisikan kodingan antarmuka yang kalian inginkan-
di dalam tag section ini -->
<div class="bgimg-3">
<div class="caption">
<span class="border">FULL PAGE</span><br>
<span class="border">SECTION TIGA</span>
</div>
</div>
</section>
</div>
<script src="https://cdn.jsdelivr.net/npm/docslider@3.0.1/docSlider.min.js"></script>
<script>
//inisialisasi docSlider.js
//disini gua cuma contohin beberapa parameter konfigurasi yang ada pada docSlider.js
//untuk fitur lebih lengkap nya, kalian bisa baca dokumentasinya ya
docSlider.init({
speed : 600,
startSpeed : null,
easing : 'ease-in-out',
pager : true
});
</script>
</body>
</html>
Semoga bermanfaat..
