Wie löst man eine CSS3-Animation nur aus, wenn ein Element in die Ansicht gescrollt wird?

CSS3-Animation beim Scrollen auslösen

Problem:

Ein animiertes Balkendiagramm wird geladen, bevor der Inhalt angezeigt wird, was dazu führt verpasste Animation.

Lösung:

Zu aktivieren die CSS3-Animation beim Scrollen in die Ansicht:

1. Erfassen Sie Scroll-Ereignisse

Implementieren Sie JavaScript- oder jQuery-Ereignis-Listener, die Scroll-Ereignisse überwachen.

2. Überprüfen Sie die Sichtbarkeit des Elements

Überprüfen Sie für jedes Scroll-Ereignis, ob das Element (Balkendiagramm) im Ansichtsfenster des Benutzers sichtbar ist.

3. Animation starten

Sobald das Element sichtbar wird (z. B. wenn isElementInViewport()) true zurückgibt), starten Sie die Animation durch Anwenden der entsprechenden CSS-Klasse (z. B. „start“). .

Beispiel Code:

<!-- 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) {
    // Calculate element and viewport positions
    // ...

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

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

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

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

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

Das obige ist der detaillierte Inhalt vonWie löst man eine CSS3-Animation nur aus, wenn ein Element in die Ansicht gescrollt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!