Buat Widget Sepenuhnya Animasi dengan Shift.css

Animasi web menawarkan cara untuk ambil perhatian orang dan menarik mereka lebih jauh ke dalam situs web. Ada banyak alat di luar sana buat animasi gratis tapi Shift.css adalah salah satu yang terbaru dalam kelompok itu.

Itu adalah kerangka kerja open source gratis dibuat untuk membuat animasi dinamis dalam wadah apa pun. Dan animasi ini tidak dikunci dalam satu urutan. Anda sebenarnya dapat membuat animasi khusus untuk setiap elemen di blok dan terapkan ini dalam urutan tertentu.

Itu Shift halaman demo dapat menunjukkan kepada Anda jauh lebih baik daripada yang bisa saya jelaskan dengan kata-kata.

Satu hal yang akan Anda perhatikan adalah bahwa setiap elemen di dalam wadah adalah elemen HTML terpisah. Baik itu SVG atau gambar atau apa pun, Anda dapat menghidupkan semuanya secara terpisah buat efek animasi kustom Anda sendiri.

Perpustakaan dilengkapi dengan dua file, a .css dan .js perpustakaan, dan keduanya harus ditambahkan ke kepala dokumen Anda.

Saya tidak dapat menemukan repo GitHub untuk proyek ini, jadi Anda harus melakukannya unduh file secara langsung dari situs web Shift.css.

Langkah selanjutnya adalah mendefinisikan elemen kontainer dengan beberapa konten. Nama kelas sangat penting sehingga setiap elemen animasi perlu melakukannya punya kelas .pergeseran-elemen terapan.

Seiring dengan kelas-kelas ini, Anda juga bisa tambahkan atribut data HTML5 untuk menentukan cara kerja animasi. Saat ini hanya ada tiga tetapi mereka harus cukup untuk menyesuaikan efek animasi penuh.

1. animasi data: Nama animasinya
2. keterlambatan data: Total keterlambatan (dalam detik) sebelum animasi dimulai
3. durasi data: Total panjang (dalam detik) dari animasi

Nama animasi harus berupa a animasi yang sudah ditentukan sebelumnya dibuat untuk pustaka Shift. Sekarang ini ada 15 nama animasi untuk dipilih. Anda dapat melihat mereka tercantum di bagian bawah halaman utama Shift.css.

Hanya salin / tempel Apapun yang kamu mau ke dalam pengaturan nama animasi dan kamu harus baik untuk pergi! Misalnya, jika saya ingin menggunakan animasi fade keluar saya akan menambahkan data-animasi = "shift_exitFade" sebagai atribut data ke elemen apa pun harus bernyawa seperti itu. Peasy mudah.

Saya berharap perpustakaan ini datang dengan lebih banyak opsi dalam JavaScript karena itu akan membiarkan pengembang memiliki kontrol lebih besar atas penempatan dan fitur. Tetapi untuk kerangka animasi sederhana (dan gratis) saya tidak bisa mengeluh.

Shift.css sangat cocok untuk pengembang yang lebih baru yang ingin membuat gaya animasi yang lebih kompleks tanpa menulis kode verbose dari awal.