# Efecto parallax: profundidad en el scroll y el motion design

[Canonical HTML page](https://gradiently.design/es/guide/parallax-effect)

El parallax toma prestado un truco de tus propios ojos: lo cercano se mueve más rápido que lo lejano. Usado con mesura añade profundidad a una página o a un loop; exagerado, marea. Así se hace bien.

## The short version

- Un efecto parallax crea profundidad moviendo capas a distintas velocidades, de modo que las capas más cercanas se mueven más rápido que las lejanas.
- En las webs, el parallax al hacer scroll ya puede construirse en CSS con animaciones ligadas al scroll, sin JavaScript, en los navegadores que las admiten.
- La técnica antigua de `background-attachment: fixed` la ignora Safari en iOS, así que no conviene confiar en ella para móvil.
- Un movimiento de parallax grande o rápido puede causar malestar a personas con trastornos vestibulares, así que debe desactivarse cuando un visitante prefiere movimiento reducido.
- Un parallax sutil, con capas que se mueven solo un poco, añade profundidad sin distraer del contenido.

Un **efecto parallax** hace que un diseño plano parezca profundo moviendo sus capas a distintas velocidades: el fondo se desliza despacio, el plano medio algo más rápido y el primer plano lo más rápido, igual que las colinas lejanas parecen avanzar lentas tras la ventanilla de un tren mientras los postes de la valla pasan volando. En las webs suele ocurrir al hacer scroll. En motion design ocurre en el tiempo, en un loop o en un vídeo. En ambos casos, el mejor parallax es pequeño, lento y se apaga para quien le ha pedido a su dispositivo menos movimiento.

## Cómo crea profundidad el parallax

Tu cerebro calcula la distancia en parte a partir del movimiento relativo. Cuando dos capas se mueven a la misma velocidad, se leen como una sola superficie plana. Cuando una se mueve más despacio, se lee como más lejana. Tres capas suelen bastar para crear una profundidad convincente.

| Capa | Velocidad respecto al scroll | Qué va en ella |
| --- | --- | --- |
| Fondo | La más lenta, entre un 10% y un 30% del scroll | Un degradado, un cielo, una textura o un campo de color suave |
| Plano medio | Media, más o menos la mitad | Formas, fotos, ilustraciones |
| Primer plano | Velocidad normal de scroll | Titulares, botones, el contenido en sí |

Un parallax sencillo de tres capas. Deja el contenido en la capa que se desplaza con normalidad, para que la lectura nunca se vea afectada.

> **El texto no se mueve** Nunca pongas texto de cuerpo ni botones en una capa de parallax en movimiento. Las palabras que se deslizan a una velocidad distinta de la página cansan al leer y cuesta hacer clic en ellas.

## Efecto parallax en CSS con animaciones ligadas al scroll

El CSS moderno puede vincular una animación a la posición del scroll en lugar de al tiempo, con `animation-timeline`. El navegador la ejecuta fuera del hilo principal, así que va fluida, y no hace falta JavaScript. El soporte sigue creciendo: funciona en navegadores Chromium y en Safari reciente, así que consulta el [soporte de navegadores en MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline) y trata el efecto como una mejora. Sin soporte, la página simplemente no se mueve, y no pasa nada.

```css
.hero {
  position: relative;
  overflow: clip;
  isolation: isolate;          /* keeps the layer inside the hero */
  min-height: 80vh;
  view-timeline: --hero block;
}

.hero__bg {
  position: absolute;
  inset: -15% 0;               /* extra room so edges never show */
  background:
    radial-gradient(circle at 75% 20%, #7c3aed 0%, transparent 45%),
    linear-gradient(170deg, #0f0b1e 0%, #1e1b4b 100%);
  z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero__bg {
      animation: hero-depth linear both;
      animation-timeline: --hero;
    }
  }
}

@keyframes hero-depth {
  from { transform: translateY(-10%); }
  to   { transform: translateY(10%); }
}
```

La capa de fondo se mueve un poco mientras el hero atraviesa el viewport. Solo se ejecuta donde hay soporte y donde el visitante no ha pedido movimiento reducido.

La amplitud del movimiento vive en los keyframes: un 10% en cada sentido es suave. Pasa del 20% y el efecto empieza a parecer una atracción de feria. Mover `transform` en lugar de `top` o `background-position` hace que al navegador le salga barato dibujarlo. [Rendimiento de los degradados CSS](https://gradiently.design/es/guide/css-gradient-performance) explica por qué los degradados grandes animados deben moverse, no repintarse.

## Otras formas de crear parallax al hacer scroll

| Método | Cómo funciona | Ojo con |
| --- | --- | --- |
| Animaciones ligadas al scroll | `animation-timeline: view()` o `scroll()` vincula los keyframes al scroll | Aún no está en todos los navegadores; constrúyelo como mejora |
| `background-attachment: fixed` | El fondo se queda quieto mientras el contenido pasa por encima | Safari en iOS lo ignora; una sola velocidad fija |
| Perspectiva 3D en CSS | Las capas empujadas hacia atrás con `translateZ` se desplazan más despacio | Escalado y contenedor de scroll delicados de configurar |
| JavaScript al hacer scroll | Un script mueve las capas mientras la página se desplaza | Puede ir a tirones si se ejecuta en cada evento de scroll; usa `requestAnimationFrame` |

Cuatro técnicas. Para una web nueva, las animaciones ligadas al scroll son la opción más limpia.

## Parallax y movimiento reducido

Para las personas con trastornos vestibulares, un movimiento grande provocado por el scroll puede causar mareo y náuseas. La pauta de las WCAG sobre [animación por interacciones](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) pide que un movimiento así pueda desactivarse. La forma más sencilla de respetarlo es envolver el parallax en `prefers-reduced-motion: no-preference`, como en el código de arriba, para que solo se ejecute para los visitantes que no han pedido menos movimiento. [Prefers reduced motion](https://gradiently.design/es/guide/reduced-motion) explica la media query y cómo probarla.

### Evita

- Secciones enteras deslizándose a distintas velocidades
- Texto o botones en capas en movimiento
- Movimiento que ignora los ajustes de movimiento reducido
- Secuestrar el scroll y cambiar su velocidad
- Parallax en todas las secciones de la página

### Haz

- Una capa de fondo que se mueve un poco
- El contenido en el scroll normal
- Movimiento solo bajo `no-preference`
- Scroll nativo, sin tocar
- Parallax en un solo sitio: normalmente el hero

## Parallax en motion design y vídeo

El parallax no es solo cosa del scroll. En una publicación animada, un loop o una secuencia de títulos, la misma regla crea profundidad en el tiempo: un fondo que deriva despacio, luz o partículas que se mueven algo más rápido y palabras que se quedan quietas delante. Esto último importa. Unas palabras quietas sobre un campo que se mueve con suavidad se leen como serenas y seguras, mientras que unas palabras que también derivan parecen inquietas.

Un hero web panorámico que dice Hecho para durar para una marca de outdoor, con tipografía quieta sobre un degradado que se mueve despacio

Un hero web con profundidad: el campo de fondo se mueve despacio tras unas palabras quietas, así que la vista lee primero el titular.

Las partículas son una capa intermedia natural: [efectos de partículas](https://gradiently.design/es/guide/particles-effect) muestra cómo unas motas pequeñas y tenues que se mueven algo más rápido que el fondo añaden un segundo plano de profundidad. Mantén lento y suavizado el movimiento de cada capa; [principios de motion design](https://gradiently.design/es/guide/motion-design-principles) explica por qué.

## Cómo diseñar un hero con parallax, paso a paso

1. **Diséñalo primero quieto** El hero tiene que verse terminado sin ningún movimiento, porque eso es lo que verán los visitantes con movimiento reducido y los navegadores sin soporte.
2. **Separa las capas** Pon el campo de color de fondo en su propia capa, las formas o fotos en una segunda, y el titular y el botón en la propia página.
3. **Mueve solo la capa de atrás** Empieza moviendo solo el fondo un 10% en cada sentido. Añade una capa intermedia solo si la profundidad lo pide.
4. **Pruébalo en un móvil** Comprueba que se desplaza con fluidez en un móvil de gama media y que nada da saltos en Safari para iOS.
5. **Activa el movimiento reducido y vuelve a comprobar** En los ajustes de accesibilidad de tu sistema, pide movimiento reducido y confirma que la página queda tranquila y completa.

- Capa lejana: cielo nocturno: `linear-gradient(180deg, #0c1445 0%, #1e3a8a 50%, #60a5fa 100%)`
- Capa media: brillo del horizonte: `radial-gradient(ellipse at 50% 100%, #f59e0b 0%, #b45309 35%, #1e3a8a 75%)`
- Capa cercana: primer plano oscuro: `linear-gradient(180deg, #374151 0%, #111827 55%, #0a0a0a 100%)`

Tres capas de degradado para un hero con parallax. Apiladas, con la capa lejana moviéndose menos, se leen como cielo, horizonte y primer plano.

Para la propia capa de fondo, un degradado vivo da más que uno plano. Un Mark de Gradiently exportado con Pro como loop continuo en WebM o MP4, colocado tras tu hero, le da a la página una capa trasera que ya se mueve con suavidad y que, una vez reservada, es solo tuya. Combínalo con [diseño de la sección hero](https://gradiently.design/es/guide/hero-section-design) y [fondos para el hero de una web](https://gradiently.design/es/guide/website-hero-background) para los tamaños.

## FAQ

### ¿Qué es un efecto parallax?

Una forma de crear profundidad moviendo capas a distintas velocidades, de modo que las más cercanas se mueven más rápido que las lejanas, como ocurre en la vida real.

### ¿Puedo hacer un efecto parallax solo con CSS?

Sí. Las animaciones CSS ligadas al scroll vinculan los keyframes a la posición del scroll sin JavaScript, en los navegadores que admiten `animation-timeline`. Los métodos antiguos de CSS puro usan `background-attachment: fixed` o perspectiva 3D.

### ¿Por qué no funciona background-attachment: fixed en iPhone?

Safari en iOS ignora el fondo fijo, así que el fondo se desplaza con normalidad. Usa animaciones ligadas al scroll o una técnica basada en transform.

### ¿El parallax es malo para la accesibilidad?

Un movimiento grande provocado por el scroll puede hacer que las personas con trastornos vestibulares se encuentren mal. Mantenlo sutil y desactívalo cuando un visitante prefiera movimiento reducido.

### ¿El parallax es malo para el rendimiento?

No si animas `transform` y dejas que el navegador lo gestione con animaciones ligadas al scroll. Lo que provoca tirones son los scripts que mueven elementos en cada evento de scroll.