Perpustakaan JavaScript untuk Kesan Menala Cool

Reka bentuk laman web datang dengan animasi yang dilaksanakan dengan baik. Jika anda mencari perpustakaan yang sesuai untuk menambah kesan pada projek anda, di sini saya telah membuat senarai beberapa perpustakaan yang anda boleh gunakan untuk memberikan kesan berdasarkan acara tatal.

Apabila pengguna menatal turun halaman web anda, tindakan itu boleh direka untuk mencetuskan pelbagai pilihan animasi seperti kesan pudar, kabur, 3D, paralaks, dan banyak lagi. Terdapat 25 perpustakaan JS di sini yang dapat membantu anda mencapai tindak balas semacam itu dalam reka bentuk tapak anda.

Tatal Mendedahkan

Perpustakaan yang menjadikannya mudah untuk menambah animasi tatal untuk kedua-dua web dan mudah alih. Anda boleh menetapkan pelonggaran adat, putaran 3D, tempoh dan banyak parameter mor pada elemen yang anda mahu bernyawa.

Kebergantungan: tiada | Saiz: 2.9kb | Lesen: MIT

Aniview

Plugin yang berfungsi bersama-sama dengan Animate.CSS untuk membolehkan animasi hanya apabila elemen anda masuk ke dalam paparan.

Kebergantungan: jQuery | Saiz: 1kb | Lesen: N / A

Fade Into View

Plugin yang menambah kesan masuk / keluar kepada unsur apabila mereka masuk atau keluar dari viewport yang telah ditetapkan.

Kebergantungan: jQuery | Saiz: 3.81kb | Lesen: N / A

WOW

WOW akan mendedahkan Animate.css animasi apabila acara tatal. Anda boleh menetapkan tempoh animasi, penangguhan, offset dan lelaran hak dari markup HTML, maka hanya hubungi kelas elemen dari JS.

Kebergantungan: Animate.css | Saiz: 8.23kb | Lesen: MIT

ScrollMagic

Plugin ini akan menunjukkan kesan 'Ajaib' apabila pengguna menatal halaman. Ia sesuai untuk menghidupkan, menyematkan elemen, atau mengubah kelas CSS, semuanya berdasarkan kedudukan skrol. ScrollMagic boleh bekerjasama dengan GSAP dan VelocityJS dalam mewujudkan adegan animasi. Lihat demo lengkap di sini.

Kebergantungan: jQuery, GSAP, Velocity.js | Saiz: 16.9kb | Lesen: MIT

jCcrollabilityability

Kebolehpercayaan membolehkan anda membuat halaman web tunggal dengan animasi berasaskan skrol kompleks. Apabila sroll pengguna, elemen akan dinyalakan berdasarkan kedudukan tatal. Animasi dijalankan berdasarkan kedalaman tatal, dan sudah tentu anda boleh menetapkan permulaan dan akhir animasi.

Kebergantungan: jQuery | Saiz: 1.86kb | Lesen: MIT

pushIn.js

Perpustakaan mudah untuk menambah kesan dolly-in atau push-in kepada mana-mana unsur yang berfungsi apabila pengguna menatal melalui halaman. Sangat mudah untuk dilaksanakan: hanya menambah permulaan, berhenti dan parameter kelajuan data-params ke elemen HTML anda.

Kebergantungan: tiada | Saiz: 4.94kb | Lesen: N / A

Scrollissimo

Ini adalah pustaka JS untuk menambah animasi skrol kawalan lancar. Ia menggunakan tweens dan garis masa Greensock untuk menghasilkan animasi yang lebih lancar.

Kebergantungan: GreenShock TweenLite / TweenMax | Saiz: 2.94kb | Lesen: N / A

Plugin Skrol Animasi jQuery

Ini adalah plugin jQuery untuk menambah animasi yang diprogram viewport menggunakan Greensock. Ia menjadikannya mudah untuk menghidupkan elemen dengan melonggarkan, mengubah, skala, putaran dan animasi 3D.

Kebergantungan: jQuery, GreenShock | Saiz: 14kb | Lesen: GNU GPL

Circlr

Circlr membolehkan anda membuat animasi putaran kepada elemen, yang dicetuskan oleh acara menatal, tetikus atau peristiwa sentuh. Ia sempurna untuk membuat pameran produk yang boleh dilihat dari semua 360 darjah, diaktifkan oleh skrol pengguna.

Kebergantungan: tiada | Saiz: 6.05kb | Lesen: MIT

Scrollimator

Scrollimator akan menunjukkan kedudukan dan kemajuan tatal, dan mengembalikan nilai yang boleh anda gunakan untuk menukar tween animasi yang dilampirkan kepada tatal menatal pengguna. Ia menyokong menatal menegak dan mendatar.

Kebergantungan: tiada | Saiz: 37.7kb | Lesen: N / A

Crossfade

Crossfade adalah plugin untuk menambah kesan crossfade ke imej. Kesan kabur akan diteruskan sebagai skrol pengguna terus ke bawah.

Kebergantungan: jQuery | Saiz: 3.19kb | Lesen: MIT

Kesan Skrol Halaman

Yang satu ini adalah perpustakaan untuk kesan skrol halaman percubaan yang dicipta oleh CodyHouse. Ia menggunakan velocitey.js animasi.

Kebergantungan: jQuery, Velocity.js | Saiz: 17.6kb | Lesen: N / A

jquery.parallax-scroll

Perpustakaan ini membolehkan anda menambah lancar kesan paralaks ke menatal halaman menegak. Hanya import jQuery dan jquery.easing.1.3.js, kemudian tambahkan 'data-paralaks' atribut dan parameter pilihan untuk elemen anda untuk menyesuaikan kesannya.

Kebergantungan: jQuery, jQuery.easing | Saiz: 8.72kb | Lesen: GNU GPL

parallax.js

Parallax.js adalah plugin mudah yang menambah kesan menatal paralaks, yang diilhamkan oleh laman web Spotify.

Kebergantungan: jQuery | Saiz: 6.63kb | Lesen: MIT

Enllax

Enllax adalah perpustakaan super ringan untuk digunakan untuk memohon kesan paralaks kepada sebarang elemen menatal. Anda boleh menetapkan latar belakang atau elemen latar depan untuk kesan etika. Ia berfungsi untuk menatal menegak dan mendatar.

Kebergantungan: jQuery | Saiz: 1.53kb | Lesen: MIT

Blur pada skrol

Perpustakaan ini membantu anda menambah kesan kabur pada imej, yang akan dicetuskan oleh halaman menatal. Yang lebih mendalam anda tatal ke bawah halaman, semakin kabur imej mendapat.

Kebergantungan: tiada | Saiz: 1.1kb | Lesen: N / A

boxLoader

boxLoader adalah plugin mudah untuk memuatkan unsur-unsur apabila halaman menatal. Parameter yang perlu anda tetapkan adalah arahan (x atau y), kedudukan pada peratus, kesan dan juga tempoh.

Kebergantungan: jQuery | Saiz: 3.42kb | Lesen: N / A

Tatal Halaman Pantas

Sebagai skrol pengguna melalui halaman, plugin ini akan mendedahkan kesan kecondongan 3D yang hebat ke elemen yang anda sediakan.

Kebergantungan: jQuery | Saiz: 1.5kb | Lesen: GNU GPL

AhRelax

AhRelax menyediakan cara untuk membuat animasi berasaskan skrol cepat. Ia adalah lighweight dan juga mempunyai prestasi yang hebat. Anda boleh membaca lebih lanjut mengenainya di sini.

Kebergantungan: jQuery | Saiz: 1.6kb | Lesen: MIT

Tatal Fancy

Sekiranya anda melihat kesan skrol limpahan pada Android atau iOS, dengan plugin ini, anda kini boleh menggunakannya ke laman web anda. Anda boleh menambah animasi, sama ada lantunan atau cahaya, apabila pengguna mencapai bahagian atas / bawah halaman.

Kebergantungan: jQuery | Saiz: 2.64kb | Lesen: GNU GPL

Tala imej Parallax

Plugin ini akan membuat elemen terapung dan bergerak sebagai skrol pengguna ke bawah atau ke atas halaman.

Kebergantungan: jQuery | Saiz: 8.69kb | Lesen: MIT

Kesilapan

Ini adalah plugin kecil untuk mencipta kesan mengalir apabila pengguna mengimbas atau naik halaman. Terdapat tiga kesan yang tersedia: slaid, memudar dan menunjukkan.

Kebergantungan: jQuery | Saiz: 1.95kb | Lesen: MIT

Scrollme

Menambah kesan mudah ke halaman menatal seperti skala, berputar, menterjemah dan mengubah kelegapan unsur-unsur. Mudah untuk persediaan: hanya import jQuery, plugin ini, dan tetapkan parameter animasi pada markup elemen.

Kebergantungan: jQuery | Saiz: 5.45kb | Lesen: N / A

Parallax ImageScroll

Plugin ini membolehkan anda memberikan kesan paralaks kepada mana-mana imej pada halaman anda. Ia menggunakan CSS3 Transform untuk membuat kesannya berfungsi. Plugin ini mempunyai sokongan untuk jQuery dan AMD.

Kebergantungan: jQuery | Saiz: 8.01kb | Lesen: MIT