Wie kann ich mithilfe von CSS3 und der IntersectionObserver-API Elemente nur dann animieren, wenn sie sich im Ansichtsfenster befinden?

Elemente im Ansichtsfenster animieren

In CSS3 können Sie Animationen zu HTML-Elementen hinzufügen, um sie zu bewegen oder ihr Aussehen zu ändern, wenn bestimmte Bedingungen erfüllt sind . Wenn Sie jedoch möchten, dass diese Animationen nur abgespielt werden, wenn die Elemente im Ansichtsfenster sichtbar sind, können Sie die IntersectionObserver-API verwenden.

IntersectionObserver-API verwenden

Die IntersectionObserver-API ermöglicht es Ihnen, den Schnittpunkt von Elementen mit dem Ansichtsfenster oder einem Vorgängerelement zu beobachten. Wenn ein Element sichtbar wird (d. h. das Ansichtsfenster schneidet), können Sie eine Aktion auslösen, z. B. das Umschalten einer Klasse oder das Ausführen einer Animation.

Hier ist eine Beispielimplementierung mit IntersectionObserver:

const inViewport = (entries, observer) => {
  entries.forEach(entry => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

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

// Attach observer to every [data-inviewport] element:
document.querySelectorAll('[data-inviewport]').forEach(el => {
  Obs.observe(el, obsOptions);
});

In der Funktion „inViewport“ prüfen wir, ob das Element das Ansichtsfenster schneidet (d. h. „entry.isIntersecting“) und Schalten Sie eine Klasse is-inViewport für das Zielelement um.

Um die Animation zu gestalten, können Sie wie gewohnt CSS-Übergänge oder Keyframes verwenden. Sie können beispielsweise die Animation für ein Element mit data-inviewport="scale-in" wie folgt definieren:

[data-inviewport="scale-in"] { 
  transition: 2s;
  transform: scale(0.1);
}

[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

Mit diesem Setup wird das Element von 10 % auf 100 % skaliert, wenn es wird im Ansichtsfenster sichtbar.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS3 und der IntersectionObserver-API Elemente nur dann animieren, wenn sie sich im Ansichtsfenster befinden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!