Bagaimana untuk Mencetuskan Animasi CSS3 pada Tatal ke Paparan?

Cara Mengaktifkan Animasi CSS3 apabila Kandungan Tatal ke Paparan

Masalah

Anda menggunakan animasi CSS3 untuk menghidupkan carta bar, tetapi animasi bermula apabila halaman dimuatkan. Memandangkan carta bar diletakkan di luar skrin disebabkan kandungan sebelumnya, animasi selesai pada masa pengguna menatal ke bawah untuk melihatnya.

Penyelesaian: Tangkap Peristiwa Tatal

Kuncinya terletak pada menangkap tatal acara menggunakan JavaScript atau jQuery. Dengan setiap tatal, kod akan menyemak sama ada elemen carta bar berada dalam port pandangan. Sebaik sahaja ia mengesan keterlihatan elemen, ia mencetuskan animasi dengan menambahkan kelas "mula" yang memulakan animasi.

Pelaksanaan Kod

HTML

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

CSS

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

jQuery

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get scroll position
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get element position
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

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

    // Prevent re-animation
    if ($elem.hasClass('start')) return;

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

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

Atas ialah kandungan terperinci Bagaimana untuk Mencetuskan Animasi CSS3 pada Tatal ke Paparan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!