Activitat 21: Animacions d’entrada per a qualsevol element de les nostres publicacions

Activitat 21: Animacions d’entrada per a qualsevol element de les nostres publicacions

  • Bootstrap
  • CSS
  • HTML
  • JavaScript

Descripción de la actividad

  • Añadir las reglas de estilo en el <head> del archivo: animate.cssReglasusadas en la web animate.style. Ejemplo obtenido de codepen.io
  • Añadir la estructura y contenido (WordPress): En una página, entrada, producto…
  • Añadir las declaraciones javascript (ejemplo a continuación) al final del <body>

<script>
const animar = document.querySelectorAll(‘.animado-aparece-derecha’);
animar.forEach(funcionAnimar => {
const muestraOnScroll = () => {
const alturaVentana = window.innerHeight;
const elementoTop = funcionAnimar.getBoundingClientRect().top;
if (elementoTop < alturaVentana) {
funcionAnimar.classList.add(‘aparece-derecha’);
} else {
funcionAnimar.classList.remove(‘aparece-derecha’);
}
};
window.addEventListener(‘scroll’, muestraOnScroll);
});
</script>