Efecto parallax: profundidad en el scroll y el motion design

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.

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 y trata el efecto como una mejora. Sin soporte, la página simplemente no se mueve, y no pasa nada.

.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 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 explica por qué los degradados grandes animados deben moverse, no repintarse.

Otras formas de crear parallax al hacer scroll

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 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 explica la media query y cómo probarla.

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.

Las partículas son una capa intermedia natural: efectos de partículas 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 explica por qué.

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

1. 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. 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. 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. 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. 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.

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 y fondos para el hero de una web para los tamaños.