2

Tengo una animación CSS que utiliza keyframes la cual se ejecuta una sola vez al cargar la página (vea ejemplo citado).
El resultado que busco es un control en JavaScript o JQuery que impida la ejecución de la animación hasta que esta no se encuentre en la zona de la página que el usuario está viendo (el viewport).

He conectado la animación a una clase que aplico al elemento con JavaScript pero no tengo idea de como capturar el evento que debe disparar la acción.

¿Cómo se detecta la presencia de un elemento en el viewport?

@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>

8
  • ¿Qué soporte de navegador necesitas ofrecer?
    – Sema
    Commented el 5 ene. 2021 a las 23:45
  • La mayor cantidad de navegadores posibles. Por eso intento hacer todo en puro css y acudo a javascript porque no hay de otra. Less y sass no son aplicables en mi proyecto Commented el 5 ene. 2021 a las 23:54
  • 1
    Una opción podría ser utilizar el ``; puedes ver doc y ejemplos aquí. Si por compatibilidad eso no te sirve, quizás pensaría en algo más "manual", como calcular la posición de ese elemento, y cuando el offset del scroll llegue ahí, aplicar la clase que dispara la animación. Por si esa idea te puede orientar.
    – Sema
    Commented el 6 ene. 2021 a las 0:04
  • la posición del elemento cambia en base al tipo de dispositivo porque es una página responsiva. Commented el 6 ene. 2021 a las 0:09
  • En ese caso, las media queries son tus amigas :-P
    – Sema
    Commented el 6 ene. 2021 a las 2:09

1 respuesta 1

2

Una buena opción es usar la API Intersection Observer para detectar cuando el elemento aparece en el 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.