Efecto parallax con CSS puro: perspective y animaciones ligadas al scroll
Crea parallax con perspective y translateZ de CSS, o con animaciones ligadas al scroll, mira el cálculo de profundidad en vivo y gestiona bien los móviles y el movimiento reducido.
El parallax con CSS puro tiene dos métodos fiables. El método de perspectiva crea un contenedor con scroll y perspective, empuja hacia atrás las capas de fondo con translateZ y luego las amplía por (perspectiva menos z) dividido entre perspectiva. El método más reciente vincula una animación translate a animation-timeline: view(). Los dos deberían desactivarse con prefers-reduced-motion.
Tres formas de conseguir un efecto parallax
Método
Cómo se mueve
Ojo con
perspective + translateZ
Las capas más profundas se desplazan más despacio dentro de un contenedor 3D con scroll
Necesita su propio contenedor con scroll, no la página
animation-timeline: view()
Un translate con keyframes sigue al elemento mientras cruza el viewport
Chrome y Edge 115+, Safari 26+, Firefox 161+
background-attachment: fixed
El fondo se queda quieto mientras el contenido pasa por encima
Soporte parcial en iOS Safari; va a tirones en muchos móviles
Alternativa con JavaScript
La posición del scroll define un transform en cada fotograma
Usa requestAnimationFrame y un listener pasivo
La mayoría de los tutoriales de parallax se quedan en background-attachment: fixed, que el iPhone solo admite en parte. Esta guía muestra los dos métodos que de verdad animan capas, explica el cálculo de escala para que tus capas no se encojan y ofrece un pequeño script alternativo, además de la gestión del movimiento reducido que evita que el efecto maree a nadie.
Mueve el control de profundidad del editor para empujar más atrás la capa de fondo.
Desplázate por la vista previa y compara la velocidad de la capa trasera con la del texto delantero.
Lee la escala y la velocidad calculadas, que son las que usa el CSS de abajo.
Copia el método que encaje: perspective para un hero contenido, view() para secciones en una página normal.
Una capa en translateZ(z) bajo una perspectiva p se mueve a p dividido entre (p menos z) de la velocidad del scroll.
Pon overflow-x: hidden en el contenedor del parallax, ya que las capas escaladas son más anchas que su caja.
Declara animation-timeline después del atajo animation, porque el atajo la restablece a auto.
Envuelve el movimiento en @media (prefers-reduced-motion: no-preference) para que el efecto solo se active cuando corresponde.
Preguntas frecuentes
¿Por qué mi capa con translateZ se ve más pequeña?
Alejar un elemento del espectador con un translateZ negativo lo encoge, igual que un objeto lejano. Añade scale((p - z) / p) para recuperar su tamaño. Con perspective: 1px y translateZ(-2px), eso es scale(3).
¿Funciona background-attachment: fixed en móviles?
No de forma fiable. caniuse indica solo soporte parcial en iOS Safari y señala que la mayoría de los móviles tardan en actualizar un fondo fijo tras el scroll. Trátalo como un detalle solo para escritorio y usa uno de los métodos con transform cuando el efecto importe.
¿Es malo el parallax para la accesibilidad?
Un movimiento grande ligado al scroll puede causar mareo o náuseas a personas con trastornos vestibulares. Respeta el ajuste de reducir movimiento del sistema operativo con la media query prefers-reduced-motion y muestra las capas estáticas cuando esté activado.
¿Qué navegadores admiten el parallax ligado al scroll?
En octubre de 2026, caniuse indica animation-timeline en Chrome y Edge desde la 115, Safari desde la 26 y Firefox desde la 161. Los navegadores antiguos simplemente se saltan la animación, así que la página se sigue leyendo bien sin el efecto.
Cómo funciona el método de perspectiva
El contenedor pasa a ser el elemento con scroll y recibe un valor de perspective. Sus hijos conservan su posición 3D con transform-style: preserve-3d. Cuando el contenedor se desplaza, una capa situada más atrás en z recorre menos distancia en pantalla que una con z igual a cero, así que parece quedarse rezagada.
Como perspective en un elemento también crea un contexto de apilamiento y un bloque contenedor para los hijos fijos, mantén el envoltorio del parallax autónomo. Las cabeceras que deben quedarse fijas a la ventana van fuera de él.
Móviles y navegadores antiguos
El propio artículo de Chrome sobre parallax eficiente señala que el scroll con inercia de iOS aplanaba antes el contexto 3D, lo que anulaba el truco de la perspectiva en el iPhone. Prueba en un dispositivo real y mantén el contenido legible cuando las capas no se mueven.
El método ligado al scroll no tiene ese problema porque funciona sobre el scroll normal de la página. Donde no hay soporte, los keyframes nunca se ejecutan y la capa se queda en su posición de reposo, lo que es una alternativa limpia.
Método 1: perspective y translateZ
Hero de dos capas en su propio contenedor con scroll
Desplázate dentro del marco. La capa a rayas está en translateZ(-2px) y escalada por 3, así que se mueve a un tercio de la velocidad del scroll.
Método 2: ligado al scroll con view()
Imagen que se desliza mientras su sección cruza la pantalla
La animación solo se ejecuta donde se admite animation-timeline y el lector no ha pedido movimiento reducido.
Alternativa con JavaScript
Parallax pequeño con requestAnimationFrame
Solo se usa cuando faltan las animaciones ligadas al scroll. El listener es pasivo y el trabajo se hace una vez por fotograma.
Editor de profundidad
Profundidad de la capa trasera (translateZ): {n}px
Escala necesaria: {v}
Velocidad de la capa trasera: {v} del scroll
Vista previa del parallax, desplázate dentro
El texto delantero se mueve a velocidad completa
Sigue desplazándote para ver cómo la capa trasera se queda atrás.
Tu dispositivo pide movimiento reducido, así que la vista previa se queda quieta.