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

Aktifkan Animasi CSS3 Apabila Kandungan Tatal ke Paparan

Pertanyaan menimbulkan isu di mana animasi untuk carta bar diaktifkan apabila halaman dimuatkan, walaupun carta diletakkan di luar- skrin. Matlamatnya adalah untuk mencetuskan animasi hanya apabila penonton menatal ke bawah dan carta kelihatan.

Tangkap Acara Tatal

Untuk mencapainya, JavaScript atau jQuery boleh digunakan untuk memantau acara tatal dan tentukan apabila elemen memasuki ruang pandang. Setelah dikesan, animasi boleh dimulakan.

Dalam kod di bawah, JavaScript digunakan untuk menambah kelas "mula" pada elemen apabila ia kelihatan, yang mencetuskan animasi:

<div class="bar">
    <div class="level eighty">80%</div>
</div>

.eighty.start {
    width: 0px;
    background: #aae0aa;
    animation: eighty 2s ease-out forwards;
}

function isElementInViewport(elem) {
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

function checkAnimation() {
    var $elem = $('.bar .level');
    if ($elem.hasClass('start')) return;
    if (isElementInViewport($elem)) {
        $elem.addClass('start');
    }
}

$(window).scroll(function(){
    checkAnimation();
});

Dengan melaksanakan penyelesaian ini, animasi hanya akan diaktifkan apabila carta bar menatal ke paparan, memberikan pengguna yang lebih menarik pengalaman.

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