Animar elementos al hacer scroll

Parte de la sección JavaScript in Action del Journey de HTML de Coddy — lección 19 de 27.

A veces queremos que los elementos se animen (desvanecimiento, deslizamiento, zoom, etc.) cuando entran en el viewport al hacer scroll.
Esto se hace a menudo comprobando si el elemento es visible en la pantalla y luego añadiendo una clase que activa una animación o transición CSS.

Primero, vamos a crear un elemento HTML simple:

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

A continuación, añade el 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, vamos a crear una función de JavaScript para detectar cuándo los elementos entran en el campo de visión al hacer scroll. Dado que podemos tener múltiples elementos, los recorremos con forEach y comprobamos la posición de cada elemento en relación con la ventana gráfica (viewport).

function checkScroll() {
  const elements = document.querySelectorAll('.animate-on-scroll');
  
  elements.forEach(element => {
    // Obtener la posición del elemento relativa a la ventana gráfica
    const position = element.getBoundingClientRect();
    
    // Si el elemento está en la ventana gráfica
    if(position.top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
}

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

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

Cuando un elemento con la clase animate-on-scroll entra en el viewport, el script añade la clase visible, activando la animación.

Desafío

Fácil

Dentro del bucle, crea una sentencia if.

La condición debe verificar: si la posición superior (top position) del elemento es menor que window.innerHeight - 50.
Si la condición es verdadera, utiliza .classList.add("active") para añadir la clase active a ese elemento.

De esta manera, cada vez que un elemento aparezca en la vista (dentro de los 50px desde la parte inferior de la pantalla), aparecerá suavemente con un efecto de desvanecimiento.

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>