Estilización y Transformaciones en Efecto Parallax con CSS

Curso de Transformaciones y Transiciones en CSS

Contenido del curso

Importancia de las animaciones web

1
Transiciones y Transformaciones CSS: Beneficios y Aplicaciones
05:55 min

Conceptos iniciales

Transformaciones en 2D y 3D

Parallax con transformaciones

Transiciones

Tips de UX

Rendimiento y accesibilidad

Libros recomendados y próximos pasos

20
Recomendaciones de Libros sobre Animaciones en CSS
01:31 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:08

Estilización y Transformaciones en Efecto Parallax con CSS

Curso de Transformaciones y Transiciones en CSS

Clase 11 de 20

Clase 11 / 20

Recursos

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?

matias bravo

Hace 5 años

siento que solo repeti el codigo, pero no entiendo que es lo que realmente genera la ilusion de moverse a velocidades diferentes...

por que la card se mueve mas rapido que el fondo? que es lo que genera eso?

Lucas Frezzini

Hace 5 años

El efecto que haga que se genere mas velocidad en unos elementos que en otros o lo que influye, es el origen de donde quieres que se mueva (en algunos elementos se mueve más) y su tamaño, que es con la ilusión que uno juega.

Por ejemplo las cards, al ser más pequeñas tiene su origen y posición en un punto del scroll que cuando queremos scrollear para ver todo el fondo se da la ilusión de moverse más rápido.

Por eso comúnmente, en proyectos donde se aplica este efecto parallax, tenes casi siempre, de atrás hacia delante (eje z menor a eje z mayor) elementos más grandes (que ocupan más espacio en la pantalla y te dan más scroll) hasta elementos más pequeños. Donde los pequeños se mueven más rápido.

Saludos.

Lucas Frezzini

Hace 5 años

Por ende no hay algo que genere la ilusión de moverse más rápido (a mi entender) si no elementos más chicos que si vos scrolleas 100px y el elemento es de 100px y esta en el bottom cuando scrolleas 100px va a quedar en el top, y si el fondo era de 500px al scrollear esos 100px se va a mover su visión de ese elemento solo 100px y aún te queda resto por ver.

Todo ese concepto sumado al perpective te da la profundidad para que se vea despegado en el eje Z y te da esa sensación.

Comentarios (73)73 comentarios

Juan Camilo Vega

Diego Fabian Rico Castro

Hace 4 años

Sabina Ixchel Garcia Mendoza

Carlos Rodríguez

Diego Alejandro Correa Diaz

Sebastian Heredia

Ana Rotela Cabrera

Juan David González Rodríguez

Andreina Rodríguez

Ever Lizarraga

Carlos Daniel Rodriguez Lagunas

Martin Ceschin

Daniel Jaramillo Palacio

Jorge Luis Rueda Marin

Hace 3 años

Hebert Rodrigo Mejia Obispo

Jose Ever Muñoz Muñoz

Gonzalo Ceron Denetro

Eduardo Reyes

Henry Alexander Velásquez Rosas

Jhon Jairo Gomez Calderon

Paul Isaac Guala Bravo

Estefany Aguilar

Profesor

Pablo Nicolás Alonso

Julio Loarte Huerto

Gabriel Valdez

David Limon

Hace 2 años

Jeferson Mejicanos

Chrystian Fabian Lozano Ramirez

Omar Daniel Centeno

Cristian Blandon

Christian Michelle Torres Martínez

Irving Juárez

Bryan Gama Solórzano

Kevinn Pérez Quesada

Xiomara Alejandra Hernández Arzola

Importancia de las animaciones web

Transiciones y Transformaciones CSS: Beneficios y Aplicaciones

Conceptos iniciales

Propiedades Animables en CSS: Transform y Transition

Pseudoclases y Pseudoelementos en CSS: Uso y Ejemplos Prácticos

Funciones de Temporización y Planos en Animaciones CSS

Transformaciones en 2D y 3D

Transformaciones 2D y 3D en CSS: Uso de la Propiedad Transform

Transformaciones CSS: Scale, Skew y Rotate en Elementos HTML

Propiedad Transform Origin en CSS: Modificación del Eje de Rotación

Transformaciones 3D en CSS: Propiedades y Ejemplos Prácticos

Propiedad CSS Backface Visibility: Uso y Ejemplos Prácticos

Parallax con transformaciones

Implementación del Efecto Parallax con HTML y CSS

Estilización y Transformaciones en Efecto Parallax con CSS

Transiciones

Transiciones CSS: Transition Property y Transition Duration

Propiedades avanzadas de transiciones CSS: Timing Function y Delay

Tips de UX

Transiciones de Movimiento en Elementos Web

Mejorando la Experiencia de Usuario: Tiempos de Espera en Menús Desplegables

Solución de Parpadeo en Hover con CSS y HTML

Rendimiento y accesibilidad

Propiedades CSS óptimas para animaciones eficientes

Aceleración de Hardware y Uso de WillChange en Animaciones

Accesibilidad Web: Implementación de Reduce Motion en Animaciones

Libros recomendados y próximos pasos

Recomendaciones de Libros sobre Animaciones en CSS

Estilización y Transformaciones en Efecto Parallax con CSS

Progreso del curso

Importancia de las animaciones web

Conceptos iniciales

Transformaciones en 2D y 3D

Parallax con transformaciones

Transiciones

Tips de UX

Rendimiento y accesibilidad

Libros recomendados y próximos pasos

Recursos

Recursos