Animazione semplice utilizzando Intersection Observer

Hai la tua animazione nel tuo sito web, ma il problema è che nel momento in cui scorri fino a quella sezione, la tua animazione è finita. Ovviamente vuoi che l'utente veda la tua animazione, quindi come farai a ritardare l'animazione fino a quando non sarà visibile nel viewport?

In questo articolo ti mostrerò un modo per farlo utilizzando l'API Intersection Observer.

Ho creato un elemento div con un nome di classe "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'))

Il "entry.target.classList.remove('left-right');" line rimuove la classe animation .left-right ogni volta che l'elemento div non è visibile sullo schermo. Ricordi che nelle nostre impostazioni di animazione allo 0% impostiamo -90vh in modo da poter avere 10vh visibili? Il motivo è che la funzione javascript vedrà ancora l'elemento div e la classe .left-right non verrà rimossa mentre l'animazione è in corso. Se la classe animation .left-right renderà l'elemento non visibile sullo schermo a un certo punto, ti darà un risultato diverso quando viene chiamata la funzione. Lo script js non lo vedrà sullo schermo quindi rimuoverà la classe e quindi l'elemento div avrà la sua posizione originale indietro, a sinistra: 0vh che è visibile, quindi chiamerà nuovamente la funzione e aggiungerà l'animazione. E poi sarà di nuovo invisibile a causa della posizione iniziale dell'animazione. La classe verrà rimossa e aggiunta più e più volte, non vedrai il processo di animazione come ti aspetti che sia. Puoi rimuovere la riga "entry.target.classList.remove('left-right');" se vuoi che l'animazione venga eseguita solo una volta, allora andrà bene se la classe con la tua animazione avrà a un certo punto reso l'elemento non visibile.

Questo è solo un modo di animazione basato sulla posizione/visibilità. Avere l'animazione sul tuo sito web attrae e fa rimanere più a lungo gli spettatori.