Buat Kesan Cascading Mudah dengan CascadeJS

Animasi mewah adalah sedozen di web. Mereka semakin mudah membuat dengan banyak yang luar biasa perpustakaan animasi.

Cascade.js adalah satu lagi perpustakaan untuk ditambah ke dalam senarai, dan ia pasti unik. Dengan Cascade, anda boleh merangka kesan animasi tersuai menggunakan melaka huruf dalam teks atau elemen cascading dalam bekas utama.

Perpustakaan ini mempunyai tiada kebergantungan; ia berjalan pada JavaScript klasik. Anda boleh memasang melalui npm, Bower, atau dengan memuat turun salinan dari GitHub.

Untuk mendapatkan CascadeJS, anda akan dapat memerlukan dua fail: fail CSS dan fail JavaScript. Mereka berdua akan dibungkus dengan versi minified untuk menjimatkan beberapa KB pada saiz halaman.

Setiap elemen Cascade akan dipecah menjadi bahagian yang berasingan bernyawa secara individu melalui unsur-unsur. Ini adalah ditambah secara dinamik, jadi anda tidak perlu menukar apa-apa dalam HTML anda.

Tetapi, anda perlu sediakan aliran () fungsi dalam fail anda, selepas mensasarkan apa-apa unsur yang anda mahu hidupkan.

Anda boleh sebenarnya gunakan jQuery dengan perpustakaan ini jika anda mahu, namun ia tidak dikehendaki. Jadi, jika anda lebih memilih memilih elemen dengan jQuery maka anda bebas menggunakannya.

Inilah a coretan JavaScript vanila dari demo tapak utama:

Anda boleh lulus aliran () elemen dengan tiada parameter, atau anda boleh konfigurasikan mereka semua diri sendiri. Ia mengambil lapan parameter pilihan untuk mengedit gaya animasi, masa, tempoh, dan kelas CSS pilihan.

CascadeJS mempunyai fungsi lain yang dipanggil fragmen () yang membolehkan anda berpisah huruf (atau elemen) ke dalam bekas yang berasingan, tanpa menghidupkannya. Anda boleh menggunakan fungsi ini warna dan teks restyle pada halaman dengan menyasarkan setiap huruf dalam satu perkataan. Cukup sejuk, betul?

Semua contoh kod tersedia secara terbuka di halaman perpustakaan utama, jadi anda boleh menyalin / menyisipkan dan menggerakan anda sendiri. Tetapi, anda juga akan dapati dokumentasi di laman GitHub jika anda mencari cara yang lebih jelas untuk bermula.