Wie kann ich CSS3-Animationen nur auslösen, wenn ein Element in die Ansicht gescrollt wird?

Aktivieren der CSS3-Animation, wenn der Inhalt in die Ansicht scrollt

Wenn die Position eines Elements über das Ansichtsfenster hinausgeht, wird es aus der Ansicht ausgeblendet. Um die Leistung zu optimieren, können CSS3-Animationen nur dann initiiert werden, wenn ein Element im Ansichtsfenster erscheint. Dies ist besonders nützlich für Elemente, die weit unten auf einer Seite platziert sind und über denen sich umfangreicher Inhalt befindet.

Um dies zu erreichen, verwenden wir JavaScript oder jQuery zum Erfassen von Scroll-Ereignissen. Sobald ein Scroll-Ereignis ausgelöst wird, prüft der Code, ob das Zielelement in das Ansichtsfenster gescrollt wurde. Wenn dies der Fall ist, wird dem Element eine Anzeigeklasse hinzugefügt, die den Beginn der Animation veranlasst.

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

    // Scroll position
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

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

Das obige ist der detaillierte Inhalt vonWie kann ich CSS3-Animationen nur auslösen, wenn ein Element in die Ansicht gescrollt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!