Buat Widget Animasi Penuh dengan Shift.css

Animasi web menawarkan cara untuk ambil perhatian orang ramai dan lukiskan mereka lagi ke dalam laman web. Terdapat banyak alat di sana buat animasi percuma tetapi Shift.css adalah salah satu yang terbaru dalam kumpulan.

Ianya adalah rangka kerja sumber terbuka percuma dibuat untuk membuat animasi dinamik dalam mana-mana bekas. Dan animasi ini tidak terkunci dalam satu urutan. Anda sebenarnya boleh membina animasi tersuai untuk setiap elemen di blok dan gunakan ini dalam suatu perintah tertentu.

The Shift demo halaman boleh menunjukkan anda lebih baik daripada yang saya dapat menerangkan dengan perkataan.

Satu perkara yang anda perhatikan ialah setiap elemen di dalam bekas itu elemen HTML yang berasingan. Sama ada SVG atau imej atau apa sahaja, anda boleh menghidupkan segala-galanya secara berasingan buat kesan animasi tersuai anda sendiri.

Perpustakaan ini dilengkapi dengan dua fail, a .css dan .js perpustakaan, dan kedua-duanya perlu ditambah ke kepala dokumen anda.

Saya tidak dapat mencari repo GitHub untuk projek ini, jadi anda perlu muat turun fail secara langsung dari laman web Shift.css.

Langkah seterusnya ialah mentakrifkan satu elemen kontena dengan beberapa kandungan. Nama kelas penting supaya setiap elemen animasi perlu mempunyai kelas .peralihan-elemen digunakan.

Bersama dengan kelas ini, anda juga boleh tambah atribut data HTML5 untuk menentukan bagaimana animasi berfungsi. Sekarang hanya terdapat tiga tetapi mereka cukup untuk menyesuaikan kesan animasi penuh.

1. animasi data: Nama animasi
2. kelewatan data: Jumlah kelewatan (dalam saat) sebelum animasi bermula
3. tempoh data: Jumlah panjang (dalam saat) animasi

Nama animasi perlu menjadi animasi yang telah ditetapkan dicipta untuk perpustakaan Shift. Sekarang ada 15 nama animasi untuk dipilih. Anda boleh melihatnya disenaraikan di bahagian bawah laman utama Shift.css.

Hanya Salin tampal apa sahaja yang anda mahukan ke dalam tetapan nama animasi dan anda perlu pergi! Sebagai contoh, jika saya mahu menggunakan animasi keluar pudar yang saya tambah data-animasi = "shift_exitFade" sebagai atribut data kepada elemen apa pun yang harus dihidupkan sedemikian rupa. Senang kacang.

Saya berharap perpustakaan ini datang dengan lebih banyak pilihan dalam JavaScript kerana ia akan membolehkan pemaju mempunyai lebih banyak kawalan ke atas penempatan dan ciri-ciri. Tetapi untuk rangka animasi mudah (dan percuma) saya tidak boleh mengadu.

Shift.css sesuai untuk pemaju baru yang ingin mencipta gaya animasi yang lebih kompleks tanpa menulis kod verbose dari awal.