Wie kann ich Elemente nur dann animieren, wenn sie beim Scrollen der Seite in das Ansichtsfenster gelangen?

Animieren von Elementen im Ansichtsfenster beim Scrollen der Seite

Auf einer Webseite mit mehreren animierten Elementen kann es schwierig sein zu steuern, wann diese Animationen beginnen. Um reibungslose Scroll-Animationen zu erreichen, müssen wir sie nur dann auslösen, wenn ihre jeweiligen Elemente sichtbar werden. So können Sie dies mit der IntersectionObserver-API erreichen.

Verwendung der IntersectionObserver-API

Die IntersectionObserver-API überwacht die Sichtbarkeit von Elementen in Bezug auf das Ansichtsfenster oder ein angegebenes übergeordnetes Element. Damit können wir CSS-Animationen umschalten, wenn ein Element sichtbar wird.

Code-Snippet

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

CSS-Animationsbeispiel

Hier ist ein Beispiel, wie man Animationen auf Elemente anwendet die im Blickfeld sind:

[data-inviewport] { /* THIS DEMO ONLY */
  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;
}

Fazit

Durch die Nutzung der IntersectionObserver-API können wir jetzt das Timing unserer Animationen steuern und sicherstellen, dass sie abgespielt werden, wenn die entsprechenden Elemente im Ansichtsfenster sichtbar werden. Dieser Ansatz bietet Benutzern ein nahtloses und ansprechendes Erlebnis beim Scrollen durch Ihre Webseite.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente nur dann animieren, wenn sie beim Scrollen der Seite in das Ansichtsfenster gelangen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!