Wie löst man CSS-Animationen aus, wenn Elemente beim Scrollen der Seite in das Ansichtsfenster gelangen?

Elemente animieren, wenn sie beim Scrollen der Seite im Ansichtsfenster sichtbar sind

Bei der Verwendung von CSS-Animationen auf einer Webseite kommt es häufig vor, dass alle Animationen gleichzeitig abgespielt werden und die anderen verdeckt werden der Boden. Um dieses Problem zu beheben, untersuchen wir eine Lösung mithilfe der IntersectionObserver-API.

IntersectionObserver-API

Mit der IntersectionObserver-API können Entwickler Änderungen an der Schnittmenge eines Elements überwachen seinen übergeordneten Container oder das Ansichtsfenster. Wenn ein Element angezeigt wird, löst es ein Ereignis aus, das zum Auslösen von Aktionen verwendet werden kann.

Beispielimplementierung

Hier ist ein Beispiel, das das Umschalten der CSS-Klasse auslöst, wenn ein Element wird im Viewport sichtbar:

<br>const inViewport = (entries, Observer) => {<br> entries.forEach(entry => {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">entry.target.classList.toggle("is-inViewport", entry.isIntersecting);

Nach dem Login kopieren

});
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; //Siehe: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

// Beobachter an jedes [data-inviewport]-Element anhängen:
Dokument .querySelectorAll('[data-inviewport]').forEach(el => {
Obs.observe(el, obsOptions);
});

Im obigen Beispiel werden alle Elemente mit dem Attribut [data-inviewport] überwacht. Wenn ein Element angezeigt wird, wird die is-inViewport-Klasse hinzugefügt und die im folgenden CSS definierte Animation wird ausgelöst.

<br>[data-inviewport="scale-in"] { <br> Transition: 2s;<br> Transformation: Scale(0.1);<br>}<br>[data-inviewport="scale-in"].is-inViewport { <br> Transformation: Scale(1) ;<br>}</p>
<p>[data-inviewport="fade-rotate"] { <br> Übergang: 2s;<br> Deckkraft: 0;<br>}<br>[data-inviewport=" fade-rotate"].is-inViewport { <br> transform: rotation(180deg);<br> opacity: 1;<br>}<br>

Diese Lösung stellt sicher, dass Animationen Spielen Sie nur, wenn Elemente beim Scrollen sichtbar werden, was das Benutzererlebnis verbessert und eine optisch ansprechendere Webseite erstellt.

Das obige ist der detaillierte Inhalt vonWie löst man CSS-Animationen aus, wenn Elemente beim Scrollen der Seite in das Ansichtsfenster gelangen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!