📘 Módulo 15: CSS Avanzado – Efectos visuales experimentales

Aprender a aplicar parallax y scroll animations. Usar propiedades avanzadas como clip-path y mask.

Objetivos

Aprender a aplicar parallax y scroll animations.
Usar propiedades avanzadas como clip-path y mask.
Crear efectos visuales innovadores que sorprendan al usuario.
Integrar estas técnicas en proyectos reales de forma responsable.

🔹 1. Parallax con CSS

El efecto parallax da sensación de profundidad al mover el scroll.

css

.parallax {
  background-image: url('fondo.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 100vh;
}

👉 El fondo permanece fijo mientras el contenido se desplaza.

🔹 2. Scroll animations

css

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

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

👉 Con JavaScript puedes añadir la clase .visible cuando la sección entra en el viewport.

🔹 3. Clip-path para formas creativas

css

.imagen {
  clip-path: circle(50% at 50% 50%);
}

👉 Recorta una imagen en forma circular. Otros ejemplos: polygon(), ellipse(), etc.

🔹 4. Mask para efectos avanzados

css

.texto-mascara {
  background: linear-gradient(90deg, #ff6600, #003366);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

👉 Texto con degradado aplicado mediante máscara.

🔹 5. Combinación de efectos

Parallax + scroll animations: secciones que aparecen mientras el fondo se mantiene fijo.
Clip-path + animaciones: imágenes que cambian de forma al pasar el ratón.
Mask + degradados: títulos con efectos llamativos y modernos.

📝 Actividad práctica

Implementa un efecto parallax en el header de tu página.
Haz que las secciones aparezcan con animación al hacer scroll.
Recorta una imagen con clip-path y añade una transición para que cambie de forma al hover.
Crea un título con texto degradado usando mask.

MÓDULO 16 CSS Responsive Avanzado