📘 Módulo 12: CSS + JavaScript – Animaciones interactivas

Aprender a controlar animaciones CSS con JavaScript. Usar clases dinámicas para disparar transiciones y animaciones.

Objetivos

• Aprender a controlar animaciones CSS con JavaScript.
• Crear efectos que respondan a la interacción del usuario (clic, scroll, hover avanzado).
• Usar clases dinámicas para disparar transiciones y animaciones.
• Integrar CSS y JS para experiencias más inmersivas.

🔹 1. Activar animaciones con clases dinámicas

css

/* Animación CSS */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.caja {
  opacity: 0;
}

.caja.activa {
  animation: aparecer 0.6s ease forwards;
}

js

// JS para añadir la clase al hacer clic
document.querySelector("#boton").addEventListener("click", () => {
  document.querySelector(".caja").classList.add("activa");
});

👉 El elemento .caja se anima solo cuando recibe la clase activa.

🔹 2. Animaciones al hacer scroll

js

window.addEventListener("scroll", () => {
  const elemento = document.querySelector(".animar-scroll");
  const posicion = elemento.getBoundingClientRect().top;
  if (posicion < window.innerHeight) {
    elemento.classList.add("visible");
  }
});

css

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

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

👉 El elemento aparece suavemente cuando entra en el viewport.

🔹 3. Hover avanzado con JavaScript

js

const boton = document.querySelector(".boton");
boton.addEventListener("mouseenter", () => {
  boton.classList.add("hover-activo");
});
boton.addEventListener("mouseleave", () => {
  boton.classList.remove("hover-activo");
});

css

.boton.hover-activo {
  transform: scale(1.1);
  box-shadow: 0 0 15px #ff6600;
  transition: all 0.3s ease;
}

🔹 4. Animaciones sincronizadas

Puedes combinar varias animaciones CSS y dispararlas con JS para crear secuencias (ej. modal que aparece con fade-in y botones que entran con delay).

📝 Actividad práctica

1. Crea un botón que al hacer clic muestre una tarjeta con animación fade-in.
2. Implementa un efecto de scroll que haga aparecer secciones de tu página progresivamente.
3. Diseña un hover avanzado que combine escala + sombra dinámica activada con JS.

MÓDULO 13 CSS Layouts completos con Grid y flexbox