Bagaimanakah Saya Boleh Mencetuskan Animasi CSS3 Hanya Apabila Elemen Tatal ke Paparan?

Cetuskan Animasi CSS3 semasa Menatal ke Paparan

Objektif: Aktifkan animasi CSS3 pada elemen apabila ia ditatal ke paparan pengguna.

Masalah: Disebabkan kandungan yang memberangsangkan menolak carta bar animasi di luar skrin, animasinya bermula lebih awal apabila halaman dimuatkan.

Penyelesaian: Gunakan JavaScript atau jQuery untuk memantau acara menatal.

Pelaksanaan:

1. Tangkap Peristiwa Tatal: Gunakan JavaScript atau jQuery untuk menangkap peristiwa tatal, memastikan animasi tercetus hanya apabila elemen sasaran berada dalam port pandangan.
2. Semak Keterlihatan Elemen: Di dalam acara tatal pendengar, fungsi seperti isElementInViewport() menentukan sama ada elemen animasi telah memasuki pengguna paparan.
3. Mulakan Animasi: Setelah elemen kelihatan, tambahkan kelas (cth., "mula") untuk mencetuskan animasi.

Contoh:

Dalam contoh ini, jQuery digunakan untuk mengendalikan acara tatal dan mengenal pasti bila carta bar menjadi kelihatan:

$(window).scroll(function() {
    var $elem = $('.bar .level');

    if (!$elem.hasClass('start') && isElementInViewport($elem)) {
        $elem.addClass('start');
    }
});

Kod JavaScript ini memastikan bahawa animasi carta bar bermula hanya apabila pengguna menatal ke bawah dan carta menjadi kelihatan dalam port pandangan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetuskan Animasi CSS3 Hanya Apabila Elemen Tatal ke Paparan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!