Animación al hacer scroll con JavaScript [IntersectionObserver]

👀 Demostración

💡 Aplicaciones y Ventajas

Este modelo anima elementos con una transición suave al aparecer al hacer scroll.

• ✅ Dirige naturalmente la atención del usuario (menos contenido omitido)
• ✅ Mejora la legibilidad evitando mostrar demasiado contenido de golpe
• ✅ Permite carga diferida de imágenes, gráficos, etc. con IntersectionObserver
• ✅ Ligero y fácil de personalizar — ideal para landings, listas de productos, FAQs, etc.
• ✅ Mejora la impresión general del sitio con animaciones simples

📋 Código para Copiar

<style>
.box {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  margin: 1rem 0;
}
.box.visible {
  opacity: 1;
  transform: translateY(0);
}
</style>

<div class="box fadein">🍎 Manzana</div>
<div class="box fadein">🍊 Naranja</div>
<div class="box fadein">🍌 Banana</div>
<div class="box fadein">🍇 Uva</div>
<div class="box fadein">🍉 Sandía</div>

<script>
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target);
    }
  });
});
document.querySelectorAll(".fadein").forEach(el => observer.observe(el));
</script>

      📋 Copiar
    

🧩 Cómo funciona IntersectionObserver y consejos para su implementación

IntersectionObserver es una API del navegador que permite detectar cuándo un elemento específico entra en el área visible de la pantalla (viewport). En comparación con el evento tradicional scroll, es más liviana y ofrece un mejor rendimiento, ideal para optimizar animaciones.

🔍 ¿Dónde se puede utilizar?

Además de las animaciones basadas en desplazamiento, se puede aplicar para la carga diferida de imágenes o videos, activar anuncios publicitarios, entre otros usos. Su flexibilidad la hace útil en múltiples contextos web.

⚙ Consejos para la implementación

Para mantener un buen rendimiento, se recomienda usar unobserve() para dejar de observar los elementos una vez que se han mostrado. Si se manejan varios elementos, utiliza querySelectorAll() junto con un bucle para aplicar el observador a cada uno.

Combinado con animaciones, IntersectionObserver mejora considerablemente el atractivo visual del sitio. No olvides ajustar correctamente las propiedades transform y transition en CSS para lograr el mejor efecto.