Animar elementos al desplazarse

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 19 de 27.

A veces queremos que los elementos se animen (aparezcan gradualmente, se deslicen, se amplíen, etc.) cuando entren en la ventana gráfica al desplazarnos.
Esto suele hacerse comprobando si el elemento está visible en la pantalla y después añadiendo una clase que activa una animación o transición CSS.

Primero, creemos un elemento HTML sencillo:

<div class="animate-on-scroll">This element will animate when scrolled into view</div>

A continuación, añade CSS para la animación:

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

Ahora, creemos una función de JavaScript para detectar cuándo los elementos aparecen en pantalla al desplazarse. Como puede haber varios elementos, los recorremos con forEach y comprobamos la posición de cada uno con respecto a la ventana gráfica.

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Obtén la posición del elemento con respecto al área visible
    const position = element.getBoundingClientRect();
    
    // Si el elemento está en el área visible
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

// Ejecutar al desplazarse
window.addEventListener('scroll', checkScroll);

// Ejecutar una vez al cargar la página
checkScroll();

Cuando un elemento con la clase animate-on-scroll entra en la ventana gráfica, el script añade la clase visible, lo que activa la animación.

Desafío

Fácil

Dentro del bucle, crea una instrucción if.

La condición debe comprobar si la posición superior del elemento es menor que window.innerHeight - 50.
Si la condición es verdadera, usa .classList.add("active") para agregar la clase active a ese elemento.

De esta manera, cada vez que un elemento entre en la vista (a menos de 50px de la parte inferior de la pantalla), aparecerá gradualmente y con suavidad.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Scroll Animation Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Discover the Beauty of Nature</h1>
    <p>Scroll down to reveal the magic</p>
  </header>

  <div class="container">
    <div class="fade-in card">
      <h2>Mountains</h2>
      <p>Standing tall and timeless, mountains remind us of strength and stability.</p>
    </div>

    <div class="fade-in card">
      <h2>Forests</h2>
      <p>Forests are the lungs of our planet, offering peace and endless green beauty.</p>
    </div>

    <div class="fade-in card">
      <h2>Rivers</h2>
      <p>Calm or powerful, rivers flow endlessly, connecting life along their paths.</p>
    </div>

    <div class="fade-in card">
      <h2>Deserts</h2>
      <p>Silent and vast, deserts teach us resilience and the value of every drop of water.</p>
    </div>

    <div class="fade-in card">
      <h2>Oceans</h2>
      <p>The oceans cover most of our Earth, a mysterious world full of wonder and life.</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>