Lograr que los elementos de una página se muevan a velocidades distintas mientras el usuario hace scroll es uno de los efectos visuales más atractivos en diseño web. Con unas pocas propiedades de CSS —perspective, translateZ y scale— puedes construir un efecto parallax completo sin necesidad de JavaScript. Aquí se explica paso a paso cómo estilizar las capas de fondo, medio y primer plano para conseguir ese resultado.
¿Cómo preparar el contenedor y el body para el parallax?
Antes de tocar las capas, hay que eliminar los márgenes por defecto del navegador. Se le asigna margin: 0 al body para que no queden espacios no deseados [0:42].
El contenedor principal necesita varias propiedades clave:
- width: 100% para ocupar todo el ancho disponible.
- perspective-origin: 50% para definir desde dónde se calcula la perspectiva.
- overflow-x: hidden para evitar que las imágenes se desborden horizontalmente.
- overflow-y: scroll para permitir el desplazamiento vertical.
- position: relative para establecer el contexto de apilamiento que permite a los hijos posicionarse con
absolute [1:37].
El concepto de contexto de apilamiento es fundamental: al declarar el contenedor como relative, todos los elementos hijos con position: absolute se posicionan en relación a él, lo que permite apilar las capas unas sobre otras.
¿Qué papel juegan translateZ y scale en cada capa?
Cada imagen recibe position: absolute junto con left: 0, right: 0 y margin: auto para centrarse horizontalmente. Además se les aplica transform-origin: 0 50% para que el punto de referencia de la transformación sea el centro vertical del elemento [2:28].
La magia ocurre al asignar diferentes valores de translateZ a cada capa:
- Background:
translateZ(0px) con scale(1). Al no trasladarse en el eje Z, mantiene su tamaño original y se mueve a la velocidad base del scroll [3:05].
- Middle:
translateZ(-5px) con scale(0.375). Está más alejado en profundidad, así que se desplaza más lento y se escala para compensar el aumento visual [3:42].
- Foreground (Alicia):
translateZ(-2px) con scale(0.75). Se sitúa entre las otras dos capas, creando una velocidad intermedia [4:30].
El resultado es que al hacer scroll, el fondo, las tarjetas del medio y Alicia se mueven cada uno a una velocidad completamente diferente, generando la profundidad característica del parallax [6:15].
¿De dónde sale el valor del scale?
Existe una fórmula sencilla para calcular el scale correcto y que los elementos no se vean desproporcionados [8:08]:
scale = (perspective - translateZ) / perspective
Con una perspective de 8px:
- Background:
(8 - 0) / 8 = 1.
- Foreground:
(8 - 2) / 8 = 0.75.
- Middle:
(8 - 5) / 8 = 0.375.
Si se omite el scale, el elemento más cercano al observador se ve enormemente ampliado. En el ejemplo, sin scale Alicia aparece "extremadamente grande" y pierde coherencia visual [8:55].
¿Cómo se estilizan y posicionan las cards?
Las tarjetas decorativas del middle layer comparten un estilo base [6:30]:
background: white.- Dimensiones fijas, por ejemplo
width: 100px y height: 80px.
position: absolute y un border-radius al gusto.transform: rotate(20deg) para darles un ángulo que rompa la rigidez visual.
Cada tarjeta (.one, .two, .three) se posiciona con valores distintos de left, right, top o bottom, distribuyéndolas de forma dispersa por el layout [7:00]. No necesitan ser valores precisos; se trata de repartirlas visualmente.
¿Qué inspiración existe para llevar el parallax más allá?
El sitio Booster Comics es un ejemplo donde el efecto parallax se combina con JavaScript para responder al movimiento del cursor, no solo al scroll [7:35]. Este tipo de implementación fue presentada en una charla de JSConf y muestra el potencial de mezclar CSS con JS para experiencias inmersivas.
Con las transformaciones dominadas, el siguiente paso natural son las transiciones CSS, que permiten que esos cambios de estado se ejecuten de forma fluida en lugar de instantánea. ¿Qué valores de translateZ y scale vas a probar en tu propio proyecto?
