Wie kann ich die CSS3-Animation nur aktivieren, wenn ein Element in die Ansicht gescrollt wird?

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

Die Abfrage wirft ein Problem auf, bei dem die Animation für ein Balkendiagramm beim Laden der Seite aktiviert wird, obwohl das Diagramm außerhalb positioniert ist. Bildschirm. Ziel ist es, die Animation nur dann auszulösen, wenn der Betrachter nach unten scrollt und das Diagramm sichtbar wird.

Scroll-Ereignisse erfassen

Um dies zu erreichen, können JavaScript oder jQuery zur Überwachung von Scroll-Ereignissen und verwendet werden Bestimmen Sie, wann das Element in das Ansichtsfenster gelangt. Sobald es erkannt wird, kann die Animation initiiert werden.

Im folgenden Code wird JavaScript verwendet, um dem Element die „Start“-Klasse hinzuzufügen, wenn es sichtbar wird, wodurch die Animation ausgelöst wird:

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

Durch die Implementierung dieser Lösung wird die Animation nur aktiviert, wenn das Balkendiagramm in die Ansicht gescrollt wird, was für ein ansprechenderes Benutzererlebnis sorgt.

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