Wie löst man CSS3-Animationen beim Scrollen in die Ansicht aus?

So aktivieren Sie die CSS3-Animation, wenn der Inhalt in die Ansicht scrollt

Problem

Sie verwenden CSS3-Animationen, um ein Balkendiagramm zum Leben zu erwecken, aber Die Animation beginnt in dem Moment, in dem die Seite geladen wird. Da das Balkendiagramm aufgrund des vorangegangenen Inhalts außerhalb des Bildschirms platziert wird, ist die Animation abgeschlossen, wenn Benutzer nach unten scrollen, um sie anzuzeigen.

Lösung: Scroll-Ereignisse erfassen

Der Schlüssel liegt in der Erfassung Scroll-Ereignisse mit JavaScript oder jQuery. Bei jedem Scrollen prüft der Code, ob sich das Balkendiagrammelement im Ansichtsfenster befindet. Sobald es die Sichtbarkeit des Elements erkennt, löst es die Animation aus, indem es eine „Start“-Klasse hinzufügt, die die Animation initiiert.

Code-Implementierung

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  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();
});

Das obige ist der detaillierte Inhalt vonWie löst man CSS3-Animationen beim Scrollen in die Ansicht aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!