Perpustakaan JavaScript untuk Efek Pengguliran Keren

Desain situs web menjadi hidup dengan animasi yang dijalankan dengan baik. Jika Anda mencari pustaka yang tepat untuk menambahkan efek ke proyek Anda, di sini saya telah membuat daftar beberapa pustaka itu Anda dapat menggunakan untuk memberikan efek berdasarkan pada acara gulir.

Saat pengguna menggulir ke bawah halaman web Anda, tindakan dapat dirancang untuk memicu berbagai opsi animasi seperti efek fade, blur, 3D, paralaks, dan banyak lagi. Ada 25 pustaka JS di sini yang dapat membantu Anda mencapai semacam respons dalam desain situs Anda.

Gulir Buka

Perpustakaan yang memudahkan untuk menambahkan animasi gulir untuk web dan seluler. Anda dapat mengatur pelonggaran kustom, rotasi 3D, durasi dan banyak parameter mor ke elemen yang ingin Anda animasikan.

Ketergantungan: tidak ada | Ukuran: 2.9kb | Lisensi: MIT

Aniview

Plugin yang bekerja bersama dengan Animate.CSS untuk mengaktifkan animasi hanya ketika elemen Anda masuk ke viewport.

Ketergantungan: jQuery | Ukuran: 1kb | Lisensi: T / A

Fade Into View

Plugin yang menambahkan efek fade in / out ke elemen ketika mereka memasuki atau keluar dari viewports yang telah ditentukan.

Ketergantungan: jQuery | Ukuran: 3.81kb | Lisensi: T / A

WOW

WOW akan mengungkapkan animasi Animate.css pada acara gulir. Anda dapat mengatur durasi animasi, penundaan, offset, dan iterasi langsung dari markup HTML, lalu panggil saja kelas elemen dari JS.

Ketergantungan: Animate.css | Ukuran: 8.23kb | Lisensi: MIT

ScrollMagic

Plugin ini akan menunjukkan efek 'Ajaib' ketika pengguna menggulir halaman. Ini sempurna untuk menjiwai, menyematkan elemen, atau mengaktifkan kelas CSS, semua berdasarkan pada posisi gulir. ScrollMagic dapat bekerja bersama dengan GSAP dan VelocityJS dalam membuat adegan animasi. Lihat demo lengkapnya di sini.

Ketergantungan: jQuery, GSAP, Velocity.js | Ukuran: 16.9kb | Lisensi: MIT

jScrollability

jScrollability memungkinkan Anda membuat halaman web tunggal dengan animasi berbasis gulir yang kompleks. Setelah pengguna mendaftar, elemen tersebut akan hidup berdasarkan pada posisi gulir. Animasi berjalan berdasarkan kedalaman gulir, dan tentu saja Anda dapat mengatur awal dan akhir animasi.

Ketergantungan: jQuery | Ukuran: 1.86kb | Lisensi: MIT

pushIn.js

Pustaka sederhana untuk menambahkan efek dolly-in atau push-in ke elemen apa pun yang berfungsi saat pengguna menelusuri halaman. Sangat mudah untuk diterapkan: cukup tambahkan parameter mulai, berhenti, dan cepat data-params ke elemen HTML Anda.

Ketergantungan: tidak ada | Ukuran: 4.94kb | Lisensi: T / A

Scrollissimo

Ini adalah perpustakaan JS untuk menambahkan animasi yang dikendalikan gulir yang halus. Ini menggunakan tweens dan timeline Greensock untuk menghasilkan animasi yang lebih halus.

Ketergantungan: GreenShock TweenLite / TweenMax | Ukuran: 2.94kb | Lisensi: T / A

Plugin Gulir Animasi jQuery

Ini adalah plugin jQuery untuk menambahkan animasi yang dipicu oleh viewport menggunakan Greensock. Ini membuatnya mudah untuk menghidupkan elemen dengan pelonggaran, transformasi, skala, rotasi, dan animasi 3D.

Ketergantungan: jQuery, GreenShock | Ukuran: 14kb | Lisensi: GNU GPL

Circlr

Circlr memungkinkan Anda untuk membuat animasi rotasi ke suatu elemen, dipicu oleh gulir, peristiwa mouse atau peristiwa sentuh. Ini sempurna untuk membuat karya produk yang dapat dilihat dari semua 360 derajat, diaktifkan oleh gulir pengguna.

Ketergantungan: tidak ada | Ukuran: 6.05kb | Lisensi: MIT

Scrollimator

Scrollimator akan menunjukkan kepada Anda posisi dan gulir kemajuan, dan mengembalikan nilai yang dapat Anda gunakan untuk mengubah tween animasi yang terlampir pada perilaku pengguliran pengguna. Ini mendukung pengguliran vertikal dan horizontal.

Ketergantungan: tidak ada | Ukuran: 37.7kb | Lisensi: T / A

Crossfade

Crossfade adalah plugin untuk menambahkan efek crossfade ke gambar. Efek buram akan berlanjut saat pengguna menggulir lebih jauh ke bawah.

Ketergantungan: jQuery | Ukuran: 3.19kb | Lisensi: MIT

Efek Gulir Halaman

Yang ini adalah pustaka untuk efek gulir halaman eksperimental yang dibuat oleh CodyHouse. Itu memanfaatkan velocitey.js animasi.

Ketergantungan: jQuery, Velocity.js | Ukuran: 17.6kb | Lisensi: T / A

jquery.parallax-scroll

Pustaka ini memungkinkan Anda untuk menambahkan efek paralaks yang mulus ke pengguliran halaman vertikal. Cukup impor jQuery dan jquery.easing.1.3.js, lalu tambahkan 'data-paralaks' atribut dan patameter opsional ke elemen Anda untuk menyesuaikan efek.

Ketergantungan: jQuery, jQuery.easing | Ukuran: 8.72kb | Lisensi: GNU GPL

parallax.js

Parallax.js adalah plugin sederhana yang menambahkan efek gulir paralaks, yang terinspirasi oleh situs Spotify.

Ketergantungan: jQuery | Ukuran: 6.63kb | Lisensi: MIT

Enllax

Enllax adalah pustaka super ringan untuk digunakan dalam menerapkan efek paralaks ke elemen gulir. Anda dapat mengatur elemen latar belakang atau latar depan untuk memiliki efek. Ini berfungsi untuk pengguliran vertikal dan horizontal.

Ketergantungan: jQuery | Ukuran: 1.53kb | Lisensi: MIT

Kabur saat digulir

Pustaka ini membantu Anda menambahkan efek blur ke gambar, yang akan dipicu oleh pengguliran halaman. Semakin dalam Anda menggulir ke bawah halaman, semakin buram gambar.

Ketergantungan: tidak ada | Ukuran: 1.1kb | Lisensi: T / A

boxLoader

boxLoader adalah plugin sederhana untuk memuat elemen setelah pengguliran halaman. Parameter yang harus Anda tetapkan adalah arah (x atau y), posisi pada persen, efek dan juga durasi.

Ketergantungan: jQuery | Ukuran: 3.42kb | Lisensi: T / A

Gulir Halaman Miring

Saat pengguna menggulir halaman, plugin ini akan mengungkapkan efek miring 3D yang mengagumkan untuk elemen yang Anda atur.

Ketergantungan: jQuery | Ukuran: 1.5kb | Lisensi: GNU GPL

AhRelax

AhRelax menyediakan cara untuk membuat animasi berbasis gulir cepat. Beratnya tinggi dan juga memiliki kinerja yang hebat. Anda dapat membaca lebih lanjut di sini.

Ketergantungan: jQuery | Ukuran: 1.6kb | Lisensi: MIT

Gulir Mewah

Jika Anda pernah melihat efek gulir melimpah di Android atau iOS, dengan plugin ini Anda sekarang dapat menerapkan ini ke situs Anda. Anda dapat menambahkan animasi, baik pantulan atau cahaya, ketika pengguna mencapai bagian atas / bawah halaman.

Ketergantungan: jQuery | Ukuran: 2.64kb | Lisensi: GNU GPL

Gulir gambar paralaks

Plugin ini akan membuat elemen melayang dan bergerak saat pengguna menggulir ke bawah atau ke atas halaman.

Ketergantungan: jQuery | Ukuran: 8.69kb | Lisensi: MIT

Terima kasih

Ini adalah plugin kecil untuk membuat efek mengalir ketika pengguna naik turun atau naik halaman. Ada tiga efek yang tersedia: slide, fade dan show.

Ketergantungan: jQuery | Ukuran: 1.95kb | Lisensi: MIT

Scrollme

Menambahkan efek sederhana ke pengguliran halaman seperti skala, memutar, menerjemahkan, dan mengubah opacity elemen. Pengaturannya mudah: cukup impor jQuery, plugin ini, dan atur parameter animasi pada markup elemen.

Ketergantungan: jQuery | Ukuran: 5.45kb | Lisensi: T / A

Parallax ImageScroll

Plugin ini memungkinkan Anda untuk memberikan efek paralaks pada gambar apa pun di halaman Anda. Itu menggunakan Transformasi CSS3 untuk membuat efek bekerja. Plugin ini memiliki dukungan untuk jQuery dan AMD.

Ketergantungan: jQuery | Ukuran: 8.01kb | Lisensi: MIT