0Pricing
JavaScript Academy · Lección

Animaciones activadas por desplazamiento

Anime elementos cuando entren en la vista.

Animaciones activadas por desplazamiento es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Animar al desplazarse

Un efecto popular consiste en hacer que los elementos aparezcan gradualmente o se deslicen a la vista cuando el usuario se desplaza hasta ellos. Intersection Observer lo simplifica: añada una clase CSS cuando un elemento entre en la ventana gráfica y deje que CSS gestione la animación.

La parte de CSS

Defina en CSS un estado inicial oculto y un estado final visible. JavaScript solo alterna una clase; la transición es completamente CSS, lo que permite mantenerla fluida.

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

Seleccionar objetivos

Marque con una clase compartida los elementos que desea animar y, después, recopílelos.

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

Crear el observador

Use un threshold para que la animación comience cuando una parte significativa del elemento sea visible, no con un solo píxel.

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

Añadir la clase

En el callback, añada la clase visible a los objetivos que se intersequen. CSS hará que aparezcan mediante una animación.

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

Animar una sola vez

Para mostrar un elemento una sola vez, deje de observarlo después de añadir la clase, de modo que no vuelva a animarse al desplazarse fuera de la vista y regresar.

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

Volver a animar en ambos sentidos

Si quiere que los elementos se animen al salir de la vista, alterne la clase según isIntersecting y siga observándolos.

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

Iniciar la observación

Observe cada objetivo para comenzar a realizar su seguimiento. El observador se ejecutará mientras el usuario se desplace más allá de cada uno.

items.forEach(el => observer.observe(el));

Crear animaciones escalonadas

Cree un efecto en cascada aplicando un retraso de transición incremental. Puede establecerlo a partir de un atributo de datos o del índice del elemento.

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

Respetar la reducción del movimiento

Algunas personas prefieren reducir el movimiento. Compruebe la consulta de medios y omita las animaciones para ellas; muestre el contenido inmediatamente.

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

Mejoras de rendimiento

Como las transiciones CSS realizan el trabajo pesado y el navegador se encarga de detectar la visibilidad, las animaciones de desplazamiento siguen siendo fluidas incluso con muchos elementos. No hay cálculos en eventos de desplazamiento ni tirones.

Comprobación rápida

Compruebe su comprensión de las animaciones activadas por el desplazamiento.

Resumen

Ha creado animaciones activadas por el desplazamiento:

  • Defina estados ocultos y visibles en CSS.
  • Observe los objetivos con un threshold adecuado.
  • Alterne una clase cuando se produzca la intersección; CSS se encarga de la animación.
  • Use unobserve para mostrar elementos una sola vez.
  • Respete prefers-reduced-motion.

Ha terminado con Intersection Observer. A continuación, Web Workers.

Preguntas frecuentes

¿La lección «Animaciones activadas por desplazamiento» es gratis?

Sí — el texto completo de «Animaciones activadas por desplazamiento» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Animaciones activadas por desplazamiento»?

Anime elementos cuando entren en la vista. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Animaciones activadas por desplazamiento»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Observación de la visibilidad de elementos
  2. Carga diferida de imágenes
  3. Desplazamiento infinito
  4. Animaciones activadas por desplazamiento
← Volver a JavaScript Academy