Prosta animacja za pomocą obserwatora skrzyżowań

Masz swoją animację na swojej stronie internetowej, ale problem polega na tym, że w momencie przewinięcia do tej sekcji animacja jest gotowa. Oczywiście chcesz, aby użytkownik zobaczył twoją animację, więc jak zamierzasz opóźnić animację, dopóki nie będzie widoczna w rzutni?

W tym artykule pokażę Ci jeden ze sposobów na zrobienie tego za pomocą Intersection Observer API.

Stworzyłem element div o nazwie klasy „demo”.

<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'))

„entry.target.classList.remove('lewo-prawo');” line usuń animację klasy .left-right, gdy element div nie jest widoczny na ekranie. Pamiętasz, że w naszych ustawieniach animacji na 0% ustawiliśmy -90vh, abyśmy mogli mieć widoczne 10vh? Powodem tego jest to, że funkcja javascript nadal będzie widzieć element div, a klasa .left-right nie zostanie usunięta, gdy animacja jest w toku. Jeśli klasa animacji .left-right sprawi, że w pewnym momencie element stanie się niewidoczny na ekranie, wywołanie funkcji da inny wynik. Skrypt js nie zobaczy go na ekranie, dlatego usunie klasę, a następnie element div przywróci swoją pierwotną pozycję, lewą: 0vh, która jest widoczna, następnie ponownie wywoła funkcję i doda animację. A potem znów będzie niewidoczny ze względu na początkową pozycję animacji. Klasa będzie usuwana i dodawana w kółko, nie zobaczysz procesu animacji tak, jak tego oczekujesz. Możesz usunąć wiersz „entry.target.classList.remove('left-right');” jeśli chcesz, aby animacja działała tylko raz, będzie dobrze, jeśli klasa z twoją animacją będzie w pewnym momencie sprawiać, że element nie będzie widoczny.

To tylko jeden ze sposobów animacji bazujących na pozycji/widoczności. Posiadanie animacji na swojej stronie przyciąga i sprawia, że ​​widzowie zostają na dłużej.