Parallax Avanzado

Múltiples capas moviéndose a distintas velocidades según el mouse. El efecto que da profundidad y dimensión a las landings.

Mueve el cursor dentro del área

Profundidad real

Cada capa a su propia velocidad

Código

// Parallax con mouse
const x = (e.clientX - centerX) / width - 0.5
const y = (e.clientY - centerY) / height - 0.5

// Cada capa a distinta velocidad
gsap.to(bgLayer,   { x: x * 20, y: y * 20 }) // lento
gsap.to(midLayer,  { x: x * 50, y: y * 50 }) // medio
gsap.to(frontLayer,{ x: x * 80, y: y * 80 }) // rápido