Home / Questions / 418768
Accepted
Ariel Montes
Asked: 2022-01-06 15:42:03 +0800 CST 2022-01-06 15:42:03 +0800 CST

How to activate animation when visible in the viewport?

  • 772

I have a CSS animation that uses keyframeswhich is executed only once when the page loads (see example cited) .
The result I am looking for is a JavaScript or JQuery control that prevents the execution of the animation until it is in the area of ​​the page that the user is viewing (the viewport ) .

I have connected the animation to a class that I apply to the element with JavaScript but I have no idea how to capture the event that should trigger the action.

How is the presence of an element in the viewport detected?

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.animate {
  animation-name: example;
  animation-duration: 4s;
}

#cube {
  width: 100px;
  height: 100px;
  background-color: red;
}
<!-- La clase animate viene añadida posteriormente con JavaScript -->
<div id="cube" class="animate"></div>

javascript

1 Answers

  1. Best Answer

    A good option is to use the Intersection Observer API to detect when the element appears in the viewport

    // Crear el observador (Intersection Observer API)
// En la función anónima se recibe una lista de entradas,
//    no importa que solo se observe un elemento
observer = new IntersectionObserver(entries => {
  // Recorrer las entradas recibidas
  entries.forEach(entry => {
    // Está visible en el viewport
    if (entry.intersectionRatio > 0) {
      // entry.target es el elemento que se está observando
      // Agregar la clase para animar
      entry.target.classList.add('animate');
      // Dejar de observar
      observer.unobserve(entry.target);
    }
  });
});
// Observar elemento a animar
observer.observe(document.querySelector('#cube'));
    p {
  max-width:400px;
  margin:50px;
}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.animate {
  animation-name: example;
  animation-duration: 4s;
}

#cube {
  width: 100px;
  height: 100px;
  background-color: red;
}
    <p>Texto para probar que funciona la animación.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
<div id="cube"></div>

    • 2