Rellax.js - Ciri Parallax Percuma Menggunakan JavaScript Vanilla
Menatal Parallax kelihatan luar biasa apabila dilakukan dengan betul. Ia bukan satu ciri yang anda mahu pada setiap laman web tetapi untuk laman web kreatif dan halaman pendaratan, unsur-unsur paralaks ambil perhatian cepat.
Terdapat banyak pustaka JavaScript percuma untuk kesan menatal animasi tetapi ramai yang kembung atau terlalu rumit untuk sesetengah orang.
Itulah sebabnya saya cadangkan Rellax.js untuk keperluan paralaks anda. Ia adalah plugin sumber terbuka percuma yang dibina di JavaScript vanila, jadi ia tidak mempunyai sebarang kebergantungan.
Secara lalai, ia hanya memerlukan panggilan fungsi yang mudah untuk menetapkan kelas paralaks ke elemen halaman. Kemudian, semasa anda menatal, unsur-unsur ini tetap tetap dan bergerak bersama dengan pandangan pengguna.
Anda boleh menyesuaikan unsur-unsur ini untuk kelihatan lebih dekat, lebih jauh, atau di belakang elemen halaman. Ini mencipta ilusi kedalaman pada halaman dan semuanya berfungsi melalui satu perpustakaan JavaScript yang mudah.
Semua kod sumber Rellax boleh didapati secara percuma di GitHub jika anda ingin memuat turun salinan.
Seluruh persediaan menggunakan fungsi JS tunggal menyasarkan .rellax kelas seperti itu:
var rellax = Rellax baru ('. rellax'); Perhatikan anda boleh menggunakan cukup banyak mana-mana kelas yang anda mahukan, tetapi demo contoh digunakan .rellax untuk kesederhanaan.
Dari sini, anda hanya bungkus unsur parallax anda di dalam div dengan .rellax kelas dan tetapkan atribut kelajuan. Ini berfungsi melalui kelajuan data-rellax atribut tersuai yang menerima nilai dari -10 hingga +10.
Inilah satu coretan contoh dari HTML pada halaman demo:
Saya lebih perlahan dan licin
Anda juga boleh elemen pusat pada halaman dan menyesuaikan kedudukan unsur melalui CSS.
Rellax tidak memberitahu anda bagaimana untuk menyusun halaman atau cara menentukan elemen CSS pada halaman anda. Apa yang dilakukannya ialah mewujudkan kesan menatal paralaks semulajadi dengan JavaScript tulen. Bagaimana anda menggunakan ini adalah sama sekali untuk anda.
Untuk melihat a demo hidup, mengintip di tapak utama atau menyemak imbas repo GitHub. Ini termasuk beberapa dokumentasi, bersama dengan pautan ke laman web hidup menggunakan Rellax.js.
Dan yang terbaik, pasukan sentiasa bersedia untuk mengambil permintaan tarik, jadi jika anda melihat apa-apa masalah atau mempunyai cadangan untuk ciri-ciri hanya menghantar mesej cepat ke pasukan.
