📘 Módulo 17: CSS Avanzado – Scroll animations y Parallax avanzado

Aprender a crear animaciones basadas en scroll para dar dinamismo a la navegación. Implementar parallax avanzado.

Objetivos

• Aprender a crear animaciones basadas en scroll para dar dinamismo a la navegación.
• Implementar parallax avanzado con múltiples capas y velocidades distintas.
• Integrar CSS y JavaScript para controlar efectos de desplazamiento.
• Usar estas técnicas de forma responsable para mejorar la experiencia sin sobrecargar la página.

🔹 1. Scroll animations con CSS + JS

css

.seccion {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

.seccion.visible {
  opacity: 1;
  transform: translateY(0);
}

js

window.addEventListener("scroll", () => {
  document.querySelectorAll(".seccion").forEach((sec) => {
    const pos = sec.getBoundingClientRect().top;
    if (pos < window.innerHeight - 100) {
      sec.classList.add("visible");
    }
  });
});

👉 Las secciones aparecen suavemente al entrar en el viewport.

🔹 2. Parallax avanzado con múltiples capas

css

.parallax {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.capa {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.capa.fondo {
  background-image: url('fondo.jpg');
  transform: translateY(0);
}

.capa.medio {
  background-image: url('medio.png');
  transform: translateY(20px);
}

.capa.frente {
  background-image: url('frente.png');
  transform: translateY(40px);
}

👉 Cada capa se mueve a distinta velocidad para dar sensación de profundidad.

🔹 3. Scroll animations con transformaciones

css

.animar-scroll {
  transform: scale(0.8);
  opacity: 0;
  transition: all 0.8s ease;
}

.animar-scroll.visible {
  transform: scale(1);
  opacity: 1;
}

👉 Elementos que se escalan y aparecen al hacer scroll.

🔹 4. Buenas prácticas

• Mantén las animaciones sutiles y rápidas (0.3–0.8s).
• No abuses del parallax: puede afectar rendimiento en móviles.
• Usa will-change: transform; para optimizar animaciones.
• Respeta prefers-reduced-motion para accesibilidad.

📝 Actividad práctica

1. Implementa un efecto parallax con 3 capas (fondo, medio, frente).
2. Haz que las secciones aparezcan con animación al hacer scroll.
3. Diseña un bloque que se escale y se desvanezca al entrar en pantalla.

MÓDULO 18 CSS Efectos Interactivos