Bangun Halaman Anda Sendiri Menggulir Efek Dengan Roll.js
Anda dapat menemukan lusinan pustaka bergulir di seluruh web. Sebagian besar ditulis dalam JavaScript dan memiliki efek sendiri, Anda dapat mengubah gaya untuk tata letak halaman tunggal, animasi on-scroll, dan banyak lagi.
Tapi bagaimana dengan itu? mengkodekan efek gulir Anda sendiri? Atau bagaimana jika Anda hanya ingin cara sederhana untuk melacak seberapa jauh halaman telah digulir pengguna?
Roll.js adalah perpustakaan yang Anda cari. Ini skrip open source gila kecil dan sangat mudah digunakan. Anda bisa membuatnya berfungsi dengan beberapa baris JavaScript. Dan yang terbaik dari semuanya itu tidak memaksa Anda untuk melakukan sesuatu yang spesifik, melainkan memberi Anda alat untuk membuat fitur gulir kustom Anda sendiri.
Tujuan perpustakaan ini adalah untuk membantu pengembang menyusun efek gulir mereka tanpa banyak usaha.
Jika Anda melihat pada repo GitHub utama Anda akan menemukan panduan pengaturan keseluruhan dengan beberapa contoh cuplikan. Kamu bisa jalankan fungsi untuk memanggil seberapa jauh pengguna menggulir, atau berbeda “panel” di halaman.
Ini bekerja paling baik pada tata letak satu halaman tetapi Anda dapat menggunakan Roll.js untuk banyak hal.
Dengan satu panggilan fungsi, Anda dapat menarik data dengan setiap gulir yang mencakup:
- Langkah-langkah total halaman (jika ada).
- Total% digulir ke bawah halaman.
- Posisi saat ini pada halaman dalam piksel.
- Total tinggi viewport berdasarkan ukuran perangkat.
Ini juga berfungsi dengan tautan lompat yang membawa pengguna ke bawah (atau ke atas) ke bagian halaman tertentu.
Tetapi Anda dapat menemukan banyak fitur ini di perpustakaan lain juga. Apa yang membuat Roll.js begitu istimewa?
Bagian dari itu adalah sintaks, tetapi penjual besar di sini adalah ukuran total perpustakaan 8KB saat diperkecil. Itu sangat kecil untuk perpustakaan gulir yang begitu rinci!
Anda dapat melihat bagaimana ini bekerja di halaman demo utama dan Anda bahkan bisa unduh kode sumber Roll.js untuk menggali sendiri demo itu.
Semuanya dari demo langsung dan file perpustakaan mentah dapat ditarik dari GitHub dan sangat mudah digunakan.
Tetapi jika Anda memiliki pertanyaan, saran, atau ingin berbagi terima kasih atas pustaka yang mengagumkan, Anda dapat mengirim pesan ke pembuatnya @williamngan.
