Rellax.js - Fitur Parallax Gratis Menggunakan JavaScript Vanilla
Pengguliran paralaks terlihat luar biasa bila dilakukan dengan benar. Ini bukan fitur yang Anda inginkan di setiap situs web tetapi untuk situs kreatif dan halaman arahan, elemen paralaks raih perhatian dengan cepat.
Ada banyak perpustakaan JavaScript gratis untuk efek gulir animasi tetapi banyak yang kembung atau terlalu rumit bagi sebagian orang.
Itu sebabnya saya sarankan Rellax.js untuk kebutuhan paralaks Anda. Ini adalah plugin open source gratis yang dibangun di atas vanilla JavaScript, jadi begitu tidak memiliki dependensi.
Secara default, itu hanya membutuhkan pemanggilan fungsi sederhana untuk menetapkan kelas paralaks ke elemen halaman. Kemudian, saat Anda menggulir, elemen-elemen ini tetap terpaku dan bergerak bersama dengan sudut pandang pengguna.
Anda dapat menyesuaikan elemen-elemen ini agar terlihat lebih dekat, lebih jauh, atau di belakang elemen halaman. Ini menciptakan ilusi kedalaman pada halaman dan semuanya bekerja melalui satu perpustakaan JavaScript sederhana.
Semua kode sumber Rellax tersedia secara gratis di GitHub jika Anda ingin mengunduh salinannya.
Seluruh pengaturan menggunakan fungsi JS tunggal menargetkan .rellax kelas seperti ini:
var rellax = Rellax baru ('. rellax'); Catatan Anda dapat menggunakan cukup banyak kelas apa pun yang Anda inginkan, tetapi contoh demo menggunakan .rellax demi kesederhanaan.
Dari sini, Anda baru saja bungkus elemen paralaks Anda di dalam div dengan .rellax kelas dan atur atribut kecepatan. Ini bekerja melalui kecepatan data-rellax atribut khusus yang menerima nilai dari -10 hingga +10.
Ini sebuah contoh cuplikan dari HTML di halaman demo:
Saya ekstra lambat dan halus
Anda juga bisa elemen pusat di halaman dan sesuaikan posisi elemen melalui CSS.
Rellax tidak memberi tahu Anda bagaimana menyusun halaman atau cara mendefinisikan elemen CSS di halaman Anda. Yang dilakukannya hanyalah buat efek gulir paralaks alami dengan JavaScript murni. Cara Anda menggunakan ini sepenuhnya terserah Anda.
Untuk melihat a demo langsung, intip di situs utama atau jelajahi repo GitHub. Ini termasuk beberapa dokumentasi, bersama dengan tautan ke situs web langsung menggunakan Rellax.js.
Dan yang terbaik, tim selalu bersedia untuk mengambil permintaan penarikan, jadi jika Anda melihat ada masalah atau memiliki saran untuk fitur, cukup kirim pesan cepat ke tim.
