Bagaimana Anda memicu animasi di css?

Dalam posting kami sebelumnya tentang animasi CSS, kami membahas cara membuat animasi CSS khusus menggunakan kemampuan bahasa yang luas. Namun, kami hanya membahas secara singkat tentang cara memicu animasi ini. Saat menggunakan properti animasi di CSS, animasi akan segera terpicu (atau setelah penundaan singkat yang dikonfigurasi). Tetapi bahkan dengan penundaan, CSS tidak hadir dengan kemampuan untuk mengetahui kapan suatu elemen memasuki layar. Katakanlah Anda menyetel penundaan selama 1 menit, tetapi setelah satu menit berlalu, setiap pengguna tertentu mungkin belum mencapai elemen animasi, atau mungkin telah melewatinya seluruhnya

Salah satu solusi potensial di sini adalah membuat loop animasi tanpa batas waktu, tetapi ini tidak dianggap ramah pengguna. Pengguna mungkin menemukan elemen di tengah animasi, menyebabkan kebingungan. Atau mereka mungkin menganggap animasi itu mengganggu, tanpa ada cara untuk menghentikannya. Praktik terbaik umumnya mengatakan untuk hanya mengizinkan 3 loop dari animasi atau efek gerakan yang diberikan

Jadi, bagaimana kita memicu animasi secara andal dan bertanggung jawab?

Langkah pertama. mengatur fungsi untuk menambahkan kelas

Hal pertama yang pertama adalah menyiapkan CSS kita. Uji animasi Anda dan setel untuk diterapkan pada kelas tertentu (berpotensi dinamai sesuai animasi, meskipun apa pun akan berfungsi). Kemudian, saat kami menyiapkan pemicu jQuery, kami akan meminta pemicu untuk menambahkan kelas ke elemen HTML yang ingin kami animasikan. Saat kelas ditambahkan, animasi akan dipicu seolah-olah pertama kali dimuat. Mengaitkan animasi ke kelas seperti ini sangat berguna, karena memungkinkan kita mengaktifkan animasi pada semua jenis elemen di seluruh halaman atau bahkan seluruh situs, hanya dengan deklarasi CSS

Dengan pemikiran ini, badan fungsi jQuery kita akan terlihat seperti ini

$('.target-element').addClass('animate');

Pasangan tanda kurung pertama setelah tanda dolar adalah target, dan kemudian setelah titik, kami kirim untuk menambahkan kelas animate. Tapi ini hanya kode cara menambahkan kelas, kita perlu menyiapkan fungsi yang memicunya

Memicu animasi saat dimuat

Meskipun atribut animasi CSS akan terpicu saat dimuat, ini tidak selalu merupakan praktik terbaik. Ada kemungkinan elemen tertentu dimuat sebelum yang lain, menyebabkan animasi yang berpotensi membingungkan atau bahkan tidak dapat dilakukan sama sekali. Anda menghabiskan waktu untuk membuat efek khusus yang luar biasa ini, Anda ingin memastikannya dihargai

Jadi meskipun Anda hanya ingin animasi dipicu saat dimuat, pertimbangkan untuk menggunakan. siap atau. memuat acara di jQuery. Bergantung pada bagaimana Anda mengaturnya, ini bisa menunggu elemen tertentu, atau seluruh halaman siap sebelum fungsi dipicu. Jika kita ingin menunggu seluruh halaman siap, dan kemudian memicu animasi, fungsi jQuery akan terlihat seperti ini

jQuery(function($) {
$(document).ready(function() {
$('.target-element').addClass('animate');
});
});_

Ini adalah fungsi jQuery yang sangat sederhana yang memicu tindakan yang dibahas di bagian sebelumnya ketika seluruh halaman (atau "dokumen") dimuat sepenuhnya dan siap untuk berinteraksi dengan pengguna. Perhatikan bahwa kami membungkus seluruh fungsi di dalam fungsi jQuery – ini hanya memastikan bahwa kerangka kerja jQuery dan variabel $ yang diperlukan dimuat dengan benar untuk penggunaan kami

Lakukan sesuatu saat pengguna melayang

Baik jQuery atau CSS – perbedaan

Pemicu animasi umum lainnya adalah saat pengguna mengarahkan kursor ke suatu elemen. Yang ini sebenarnya dimungkinkan di CSS saja, menggunakan status :hover. Namun, ini memang memiliki beberapa batasan bawaan. Pertama, ini hanya dapat menyebabkan animasi dipicu pada elemen yang dipilih atau anak dari elemen tersebut. Jika Anda ingin mengarahkan tombol di div yang tidak dilampirkan ke elemen sebenarnya yang ingin Anda animasikan, CSS tidak akan memotongnya. Ini juga terbatas pada saat elemen yang dipermasalahkan sedang melayang secara aktif. Jika pengguna berhenti melayang, animasi juga akan berakhir secara tiba-tiba

Tetapi dengan jQuery, masalah ini tidak ada. Anda dapat mengarahkan elemen apa pun dan memicu animasi di tempat lain. Dan animasi akan berjalan dengan sendirinya meskipun pengguna berhenti melayang. Tidak ada pemberhentian mendadak atau lompatan mendadak. JQuery untuk melayang terlihat seperti ini

jQuery(function($) {
$('.animation-trigger').hover(function() {
$('.target-element').addClass('animate'), ''
});
});

Perhatikan koma dengan tanda kutip kosong setelah sub-fungsi yang menambahkan kelas animate. Metode jQuery hover sebenarnya mendukung tindakan baik saat mouse memasuki area elemen yang ditargetkan, maupun saat meninggalkan. Dalam hal ini, kami tidak ingin melakukan apa pun saat mouse pengguna meninggalkan elemen, meskipun kami akan membahas kemungkinan menghapus kelas nanti sehingga animasi dapat dipicu lagi (sebaiknya setelah penundaan sehingga animasi pertama selesai lebih dulu)

Dengarkan klik, lalu picu animasinya

Mirip dengan hover, animasi dapat dipicu setiap kali elemen lain diklik. Meskipun tidak seperti hover, yang satu ini sedikit lebih sederhana karena tidak memiliki dua keadaan yang berbeda (mouse in dan mouse out, of hover). Tetapi struktur keseluruhan sebagian besar sama

jQuery(function($) {
$('.animation-trigger').click(function() {
$('.target-element').addClass('animate');
});
});_

Cukup mudah. Contoh lain adalah…

Tunggu hingga pengguna menggulir ke elemen tertentu

Lebih otomatis daripada klik, Anda dapat menunggu untuk memicu animasi hingga pengguna menggulir ke elemen tertentu. Ini biasanya terpicu segera setelah bagian atas elemen memasuki layar, jadi pertimbangkan untuk menyetel ke elemen terpisah di bagian bawah, menyetel penundaan, atau menyetel offset jika Anda merasa nyaman menaikkannya ke level yang lebih tinggi

jQuery(function($) {
$('.animation-trigger').scroll(function() {
$('.target-element').addClass('animate');
});
});

Ulangi animasi dengan mengaktifkan kelas dengan pemicu lain

Dengan semua pengetahuan ini, kita dapat melakukan kebalikannya untuk menghapus class animate tersebut menggunakan pemicu yang sama. Kami menyebutkan ini saat menggunakan hover, tetapi Anda dapat menggunakan tombol yang mengaktifkan dan menonaktifkan animasi, atau menyetelnya untuk menghapus kelas animasi saat menggulir cukup jauh melewati elemen ke elemen lainnya. Dengan cara ini, ketika yang pertama menyala lagi, itu akan memiliki kelas untuk ditambahkan yang akan memicu animasi. Jika Anda mencoba menambahkan kelas yang sudah ada, tidak akan terjadi apa-apa. Tetapi jika kelasnya hilang, maka itu akan terpicu lagi

Salah satu cara praktis untuk melakukannya adalah dengan menggunakan pemanggilan metode yang sedikit berbeda dalam fungsi Anda

jQuery(function($) {
$('.animation-trigger').click(function() {
$('.target-element').toggleClass('animate');
});
});_

Satu-satunya perubahan di sini adalah kami mengganti "addClass" dengan "toggleClass. ” Seperti yang Anda duga, ini memeriksa untuk melihat apakah elemen tersebut memiliki kelas atau belum, dan kemudian beralih status. Jika tidak memiliki kelas, itu akan menambahkannya, dan memicu animasi. Jika memang sudah memiliki kelas, itu malah akan menghapusnya, memicu pemicu untuk menembak lagi

Perlu bantuan menyusun animasi CSS khusus, atau menemukan pemicu sempurna di jQuery? . WPress untuk penawaran gratis. Kami dengan senang hati akan membantu Anda membuat situs web impian Anda dengan animasi yang menarik dan mengasyikkan

Bagaimana cara memicu animasi lagi di CSS?

Bagaimana cara memulai animasi di halaman memuat CSS?

Bagaimana Anda memulai dan mengakhiri animasi di CSS?

Bagaimana cara memainkan animasi pada klik tombol di CSS?