Wie kann ich CSS3-Animationen nur dann auslösen, wenn Elemente in die Ansicht scrollen?

CSS3-Animationen beim Scrollen in die Ansicht auslösen

Ziel: CSS3-Animationen auf Elementen aktivieren, wenn diese in die Ansicht des Benutzers gescrollt werden.

Problem: Aufgrund des überwältigenden Inhalts, der ein animiertes Balkendiagramm aus dem Bildschirm schiebt, ist es so Animationen beginnen vorzeitig, wenn die Seite geladen wird.

Lösung:Verwenden Sie JavaScript oder jQuery, um Scrollereignisse zu überwachen.

Implementierung:

1. Scroll-Ereignisse erfassen: Verwenden Sie JavaScript oder jQuery, um Scroll-Ereignisse zu erfassen, um dies sicherzustellen Die Animation wird nur ausgelöst, wenn sich das Zielelement im Ansichtsfenster befindet.
2. Elementsichtbarkeit prüfen: Innerhalb des Scroll-Ereignis-Listeners bestimmt eine Funktion wie isElementInViewport(), ob das animierte Element in die des Benutzers eingetreten ist Ansicht.
3. Animation starten: Sobald das Element sichtbar ist, fügen Sie eine Klasse (z. B. „start“) hinzu, um das auszulösen Animation.

Beispiel:

In diesem Beispiel wird jQuery verwendet, um Scroll-Ereignisse zu verarbeiten und zu identifizieren, wann das Balkendiagramm sichtbar wird:

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

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

Dieser JavaScript-Code stellt sicher, dass die Animation des Balkendiagramms erst beginnt, wenn der Benutzer nach unten scrollt und das Diagramm im Ansichtsfenster sichtbar wird.

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