Einfache Animation mit Intersection Observer

Sie haben Ihre Animation auf Ihrer Website, aber das Problem ist, dass Ihre Animation in dem Moment fertig ist, in dem Sie zu diesem Abschnitt scrollen. Natürlich möchten Sie, dass der Benutzer Ihre Animation sieht, also wie werden Sie die Animation verzögern, bis sie im Ansichtsfenster sichtbar ist?

In diesem Artikel zeige ich Ihnen eine Möglichkeit, dies mithilfe der Intersection Observer API zu tun.

Ich habe ein div-Element mit dem Klassennamen „demo“ erstellt.

<div class="demo"><div>
 

.demo{
  width: 100vw;
  height: 200px;
  background: orange;
  top: 100vh;
  left: 0vw;
  position: relative;
} 

@keyframes left-right 
{
  0% {left: -90vw;}j
  100% {left: 0px;}

.left-right 
{
 animation-name: left-right;
 animation-duration: 2s;
 animation-iteration-count: 1;
}

// create observer
const observer = new IntersectionObserver(entries => {
  // Loop over the entries(even if we only asks one element to observe)
   entries.forEach(entry => {
   
      // If the element is visible
    if (entry.isIntersecting) {
      entry.target.classList.add('left-right');
	  return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
   entry.target.classList.remove('left-right');
  });
});

//tell observer to track the element
observer.observe(document.querySelector('.demo'))

Der „entry.target.classList.remove('links-rechts');“ line entfernt die Animationsklasse .left-right, wenn das div-Element nicht auf dem Bildschirm sichtbar ist. Denken Sie daran, dass wir bei unseren Animationseinstellungen bei 0 % -90 vh eingestellt haben, damit 10 vh sichtbar sind? Der Grund dafür ist, dass die Javascript-Funktion das div-Element weiterhin sieht und die .left-right-Klasse nicht entfernt wird, während die Animation ausgeführt wird. Wenn die Animationsklasse .left-right das Element irgendwann auf dem Bildschirm nicht sichtbar macht, erhalten Sie beim Aufruf der Funktion ein anderes Ergebnis. Das js-Skript wird es nicht auf dem Bildschirm sehen, daher wird die Klasse entfernt und dann hat das div-Element seine ursprüngliche Position zurück, links: 0vh, was sichtbar ist, dann wird es die Funktion erneut aufrufen und die Animation hinzufügen. Und dann wird es aufgrund der Ausgangsposition der Animation wieder unsichtbar sein. Klasse wird immer wieder entfernt und hinzugefügt, Sie werden den Animationsprozess nicht so sehen, wie Sie es erwarten. Sie können die Zeile „entry.target.classList.remove('left-right');“ entfernen. Wenn Sie möchten, dass die Animation nur einmal ausgeführt wird, ist es in Ordnung, wenn die Klasse mit Ihrer Animation das Element irgendwann nicht mehr sichtbar machen muss.

Dies ist nur eine Art der Animation basierend auf Position/Sichtbarkeit. Animationen auf Ihrer Website ziehen die Zuschauer an und lassen sie länger bleiben.