Kurang lengkap rasanya ketika kita membangun sebuah website tanpa disertai jQuery. Memang bukan kesalahan yang fatal. Karena hadirnya jQuery ini semata-mata untuk memudahkan developer dalam membuat websitenya semakin interaktif dan user friendly.
Di pembahasan kali ini kita tidak akan membahas detail tentang jQuery secara umum. Namun kita akan berkenalan dengan salah satu pluginnya yaitu jQuery Easing. Tentu bagi kalian, apalagi seorang blogger pasti pernah mengakses sebuah web atau blog yang di dalamnya terdapat tombol back to top. Ini merupakan navigasi untuk memudahkan user kembali ke halaman paling atas postingan. Amati lebih teliti lagi, bahwa saat tombolnya diklik ia akan melakukan scrolling halaman dengan perlahan. Dalam artian smooth scrolling. Yakni ada efek halus perpindahan posisi halaman, tidak instan.
Bukan hanya tombol back to top saja. Efek scrolling ini kadang kita dapati pada bagian navbar. Yang mana masing-masing menunya telah terhubung dengan link tertentu. Saat menu tersebut kita klik maka otomatis halaman akan bergeser sesuai link yang telah developer web tujukan.
Contoh kasus di atas tadi adalah merupakan ulah dari jQuery. Kita masih belum menerapkan fungsi dari jQuery Easing. Lalu di mana letak kerja atau fungsi dari jQuery Easing ini? Oke mari kita masuk secara perlahan ke cara implementasinya.
Agar lebih jelas. Di sini saya akan menyertakan kode untuk mempermudah menjelaskan lebih detail cara kerja dari jQuery Easing ini. Sebagai langkah awal buatlah file HTML dengan kode berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latihan jQuery Easing</title>
<style>
body {
height: 1500px;
}
#back-to-top {
background: #49ACE1;
color: #ffffff;
padding: 8px 10px;
font-size: 24px;
border-radius: 22px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15), 0 1px 1px 0 rgba(0, 0, 0, .30);
}
.back-to-top {
position: fixed !important;
position: absolute;
bottom: 25px;
right: 20px;
z-index: 998;
}
</style>
</head>
<body>
<div class='back-to-top'>
<a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'></i>
</a>
</div>
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'>
</body>
</html>
Kode di atas kita terapkan untuk contoh kasus menggunakan tombol back to top. Demikian jika kalian save dan lihat hasilnya, maka tombol back to top sebenarnya sudah berfungsi. Namun seperti yang kita lihat, perpindahannya instan. Sama sekali tidak ada efek scrollingnya. Hal itu membuat monoton sehingga mengurangi cita rasa blog kita XD. Untuk membuat efek scorlling bagaimana? mari saatnya kita bekerja dengan Javascript dan jQuery.
Tambahkan kode berikut ini tepat di bawah div akhir back to top.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000);
return false;
});
</script>
Save dan coba lihat hasilnya. Sekarang sudah nampak perbedaannya pada saat kita tambahkan javascript dibanding sebelumnya. Ada efek smooth scrolling saat kita klik tombol back to top. Mengapa itu bisa terjadi? Coba lihat pada javascript tadi. Terdapat statement animate. Itulah peneyebab dari efek scrolling saat kita klik tombol back to topnya. Angka 1000 setelahnya merupakan durasi scrolling. Kita bisa menambah jika ingin melambatkan efek kecepatan scrolling atau pun sebaliknya.
Namun sekarang meskipun sudah ada efek scrolling saya rasa masih terasa sedikit monoton. Saya ingin efek yang lebih bagus lagi sehingga lebih enak di lihat proses scrollingnya. Jadi bagaimana caranya? Nah, barulah di sini jQuery Easing berfungsi. Di sana terdapat banyak sekali style efek scrolling yang bagus-bagus. Info lengkapnya silahkan kunjungi gsgd.co.uk/sandbox/jquery/easing/. Untuk melihat beberapa style cari di bagian example. Ada dua combobox di sana yang berisi banyak sekali style efek scrolling. Klik The Clicker untuk mengetahui efeknya. Anda juga dapat membaca lembar panduan fungsi easing di easings.net/id.
Jadi efek yang mana yang paling kalian sukai? Kalau saya pribadi lebih suka efek yang easeInOutExpo. Perpindahannya seperti ada ancang-ancang dulu baru meluncur. Sekarang tinggal kita terapkan ke kode kita tadi. Caranya mudah. Kalian cukup tambahkan koma (,) setelah angka 1000 lalu disusul nama dari efeknya yang diapit oleh tanda petik. contoh: .animate({scrollTop:0}, 1000, 'easeInOutExpo');. Lalu yang paling penting jangan lupa kita tambahkan script jQuery Easing sehingga full kodenya seperti ini.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/ZainurAhb/easing/4b3ba4cf/jquery.easing.1.3.js'></script>
<script>
$(window).scroll(function() {
if($(this).scrollTop() > 200) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').hide().click(function() {
$('html, body').animate({scrollTop:0}, 1000, 'easeInOutExpo');
return false;
});
</script>
Save dan lihat hasilnya. Bagaimana, mudah bukan? Silahkan kalian terapkan ke web atau blog kalian masing-masing. Saya jamin akan membuat daya tarik tersendiri bagi pengunjung terhadap blog anda. Untuk masalah loading blog menurut pengalaman saya tidak terlalu berpengaruh. Jadi sangat aman dan sangat saya rekomendasikan untuk digunakan. Karena memang tujuan sebenarnya untuk tombol navigasi yang satu ini adalah mempermudah user kembali ke halaman postingan teratas tanpa perlu ribet scrolling manual. Untuk efeknya adalah bonus penambah daya tarik yang lebih kuat lagi terhadap para pengunjung. Sehingga mereka cukup betah untuk berlama-lama di blog Anda.
Jadi sekarang bisa kita pahami bahwa jQuery Easing merupakan plugin jQuery yang sangat membantu dalam kontribusi styling efek scrolling. Jika tanpa bantuan jQuery Easing maka secara default jQuery hanya menyediakan 2 efek, yaitu swing dan linear. Untuk mengetahui masing-masing efeknya silahkan kalian coba cek sendiri. Jika memang merasa sudah cocok dengan 2 efek tersebut, kalian tak perlu lagi menggunakan jQuery Easing. Namun jika dirasa masih monoton, jangan ragu gunakan jQuery Easing ini.
Sekian dulu artikel ini semoga bermanfaat. Jika ada yang membingungkan silahkan tanyakan di kolom komentar.
