Bina Kesan Menatal Halaman Sendiri Dengan Roll.js
Anda boleh mencari berpuluh-puluh perpustakaan menatal di seluruh web. Kebanyakan ditulis dalam JavaScript dan mempunyai kesan tersendiri yang boleh dimuat semula untuk susun atur halaman tunggal, animasi on-scroll, dan banyak lagi.
Tetapi bagaimana pula pengekodan kesan menatal sendiri? Atau bagaimana jika anda hanya mahu cara mudah menjejaki seberapa jauh ke bawah halaman pengguna telah menatal?
Roll.js adalah perpustakaan yang anda cari. Ini Skrip sumber terbuka adalah gila kecil dan mudah digunakan. Anda boleh mendapatkan kerja ini dengan beberapa baris JavaScript. Dan yang terbaik dari semua itu tidak memaksa anda melakukan sesuatu yang khusus, tetapi sebaliknya memberi anda alat untuk membuat ciri menatal tersuai anda sendiri.
Matlamat perpustakaan ini adalah untuk membantu pemaju menyusun kesan menatal mereka tanpa banyak usaha.
Jika anda melihat repo utama GitHub, anda akan dapati panduan persediaan keseluruhan dengan beberapa coretan contoh. Awak boleh menjalankan fungsi untuk memanggil sejauh mana skrol pengguna, atau berbeza “panel” pada halaman.
Ini berfungsi dengan baik pada susun atur tunggal halaman tetapi anda boleh menggunakan Roll.js untuk banyak.
Dengan panggilan fungsi tunggal anda boleh tarik data dengan setiap skrol yang termasuk:
- Jumlah langkah halaman (jika berkenaan).
- Jumlah% skrol bawah halaman.
- Kedudukan semasa pada halaman dalam piksel.
- Jumlah ketinggian paparan berdasarkan saiz peranti.
Ini juga berfungsi dengan pautan melompat yang membawa pengguna turun (atau naik) ke bahagian tertentu halaman.
Tetapi anda boleh menemui banyak ciri-ciri ini di perpustakaan lain juga. Apa yang membuatkan Roll.js begitu istimewa?
Sebahagian daripadanya adalah sintaks, tetapi penjual besar di sini adalah jumlah saiz perpustakaan 8KB apabila diminimumkan. Itu agak kecil untuk perpustakaan menatal terperinci!
Anda dapat melihat bagaimana ini berfungsi di halaman demo utama dan anda juga boleh muat turun kod sumber Roll.js untuk menggali ke dalam demo itu sendiri.
Segala-galanya dari demo langsung dan fail perpustakaan mentah boleh ditarik dari GitHub dan mereka sangat mudah untuk digunakan.
Tetapi jika anda mempunyai sebarang pertanyaan, cadangan, atau ingin mengucapkan syukur anda untuk perpustakaan hebat, anda boleh menangkap mesej kepada pencipta @williamngan.
