Smooth Full-page Scrolling dengan jQuery Plugin viewScroller.js

Kesan tatal JavaScript telah selama bertahun-tahun dengan berpuluh-puluh perpustakaan besar untuk dipilih. Tetapi pesaing baru di lapangan adalah viewScroller.js.

Perpustakaan yang sangat kecil tetapi berkuasa ini boleh membina susun atur tunggal halaman itu tatal sebagai blok dengan satu sapu roda skrol (atau pad sentuh). Ini mewujudkan susun atur terkawal di mana skrol bergerak pengguna melalui bahagian individu halaman dengan ketepatan pixel ketat.

Sememangnya, ini adalah perpustakaan percuma boleh didapati di GitHub dan mudah dipasang dengan Bower atau npm.

Walau bagaimanapun, viewScroller.js adalah tidak perpustakaan JavaScript bebas. Ia bergantung pada jQuery dan dua plugin tertentu: jQuery Mousewheel dan jQuery Easing. Ini adalah kedua-duanya diperlukan untuk mendapatkan kesan tatal berfungsi dengan betul.

Ini boleh menghalang nilai pandanganScroller kerana ia memerlukan beberapa perpustakaan JS hanya untuk berfungsi. Tetapi jika anda sudah menggunakan jQuery, maka itu adalah satu-tanpa otak. viewScroller.js menawarkan kaedah paling mudah untuk mendapatkan aplikasi web bergulir halaman tunggal berjalan tanpa banyak kod.

Walau bagaimanapun, ia berlaku, gunakan kelas dan ID yang sangat terperinci untuk mewujudkan kesan menatal. Awak boleh edit kelas ini dalam fail CSS anda sendiri atau timpa mereka dalam kod asas. Anda akan dapati senarai penuh pada halaman repo dengan nama kelas dan data persediaan lalai.

Cara paling mudah untuk bermula adalah dengan mengkloning paparanScroller demo. Mereka mempunyai satu dengan bar sisi kanan, satu lagi dengan bar sisi kiri, dan satu dengan dua bar sisi sandwich di tengah.

Jika anda baik-baik saja dengan aplikasi web jQuery-fueled maka viewScroller adalah perpustakaan percuma yang hebat untuk digunakan. Ia memerlukan beberapa kebergantungan tetapi mereka tidak sepatutnya sukar untuk dikonfigurasikan.

Ambil mengintip di demo hidup dan lihat apa yang anda fikirkan. Jika anda suka UX dan tatal skrol kemudian ikuti panduan persediaan di GitHub untuk memulakan.