Wie animiere ich Elemente nur, wenn sie sich im Ansichtsfenster befinden?

Elemente im Ansichtsfenster mithilfe des Seitenscrollens animieren

F: Wie kann ich Animationen auf einer Webseite nur anzeigen, wenn die Elemente beim Scrollen im Ansichtsfenster sichtbar sind?

A: Um dies zu erreichen, können Sie die IntersectionObserver-API verwenden.

Intersection Observer API

Mit der Intersection Observer API können Sie den Schnittpunkt zwischen einem Element und seinem übergeordneten Element oder dem Ansichtsfenster beobachten. Es ermöglicht Ihnen, Ereignisse basierend darauf auszulösen, ob das Element im Ansichtsfenster sichtbar ist.

Hier ist ein Beispiel für die Verwendung der API zum Umschalten einer Klasse, die zum Auslösen von Animationen verwendet werden kann:

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

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {};

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

Anschließend können Sie den Elementen mit der Klasse „is-inViewport“ CSS-Übergänge oder Animationen hinzufügen, um sie zu animieren, wenn sie im Ansichtsfenster erscheinen. Zum Beispiel:

[data-inviewport] {
  width: 100px;
  height: 100px;
  background: #0bf;
  margin: 150vh 0;
}

/* inViewport */

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

[data-inviewport="fade-rotate"] {
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport {
  transform: rotate(180deg);
  opacity: 1;
}

Mit diesem Code verfügen Elemente mit dem Attribut [data-inviewport] über einen CSS-Übergang. Wenn sie das Ansichtsfenster betreten, wird die is-inViewport-Klasse hinzugefügt, um die Animation auszulösen.

Das obige ist der detaillierte Inhalt vonWie animiere ich Elemente nur, wenn sie sich im Ansichtsfenster befinden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!