Mini curso · 21

Parallax de capas

Mueve el mouse: cada capa se desplaza una cantidad distinta. La profundidad es solo velocidades diferentes para el mismo movimiento.

micro.lab mueve el mouse
const x = e.clientX - centroX;
const y = e.clientY - centroY;

capas.forEach(capa => {
  const d = capa.dataset.depth;   // 0.02 … 0.20
  capa.style.transform =
    `translate(${x * d}px, ${y * d}px)`;
});

Un depth mayor hace que la capa se mueva más — se lee como “más cerca”. Los depths pequeños quedan al fondo. Mismo input, multiplicadores distintos.