Buat Efek Cascading dengan Mudah dengan CascadeJS

Animasi mewah adalah selusin sepeser pun di web. Mereka semakin mudah dibuat dengan banyak sekali yang luar biasa perpustakaan animasi.

Cascade.js adalah satu lagi perpustakaan untuk ditambahkan ke daftar, dan itu pasti yang unik. Dengan Cascade, Anda dapat merancang efek animasi khusus menggunakan surat mengalir dalam teks atau elemen kaskade dalam wadah utama.

Perpustakaan ini memiliki tidak ada ketergantungan; ini berjalan pada JavaScript klasik. Anda dapat menginstalnya melalui npm, Bower, atau dengan mengunduh salinan langsung dari GitHub.

Agar CascadeJS berfungsi, Anda akan butuh dua file: file CSS dan file JavaScript. Mereka berdua dikemas bersama versi yang diperkecil untuk menghemat beberapa KB pada ukuran halaman.

Setiap elemen Cascade dipecah menjadi beberapa bagian yang terpisah bernyawa secara individu melalui elemen. Ini adalah ditambahkan secara dinamis, jadi Anda tidak perlu mengubah apa pun di HTML Anda.

Tapi, Anda harus melakukannya mengatur mengalir() fungsi di file Anda, setelah menargetkan elemen apa pun yang ingin Anda menghidupkan.

Anda sebenarnya bisa gunakan jQuery dengan perpustakaan ini jika Anda mau, bagaimanapun tidak dibutuhkan. Jadi, jika Anda lebih suka memilih elemen dengan jQuery maka jangan ragu untuk menggunakannya.

Ini a cuplikan JavaScript vanilla dari demo situs utama:

Anda dapat melewati mengalir() elemen dengan tidak ada parameter, atau kamu bisa konfigurasikan semuanya dirimu sendiri. Dibutuhkan delapan parameter opsional untuk mengedit gaya animasi, waktu, durasi, dan kelas CSS opsional.

CascadeJS memiliki fungsi lain yang disebut pecahan() yang memungkinkan Anda berpisah huruf (atau elemen) ke dalam wadah yang terpisah, tanpa menjiwainya. Anda dapat menggunakan fungsi ini untuk warna dan teks restyle pada halaman dengan menargetkan setiap huruf dalam sebuah kata. Cukup keren, benar?

Semua contoh kode tersedia secara terbuka di halaman perpustakaan utama, sehingga Anda dapat menyalin / menempel dan mengotak-atik sendiri. Tetapi, Anda juga akan menemukan dokumentasi di halaman GitHub jika Anda mencari cara yang lebih jelas untuk memulai.