Parallax: perspectiva 3D

Seguramente has visto el efecto parallax en muchas páginas: cuando se ve que el fondo de la página está quieto, o se mueve muy lentamente, mientras el contenido de la página se desplaza al hacer scroll.

En la vida real este efecto es el que nos permite estimar distancias a ojo. Es lo que podríamos llamar también la perspectiva.

No voy a entrar en tecnicismos, solo decir que se trata de un efecto óptico que nos hace ver la imagen cercana más grande y con movimento más rápido que los objetos lejanos cuando nos desplazamos. En cine y en animación es muy habitual verlo.

En cualquier elemento de la página web con fondo (background) tenemos dos capas superpuestas: el fondo y el contenido del elemento. Podríamos aplicar un efecto parallax de fondo, aunque realmente no definimos una perspectiva, pues ambas capas están prácticamente pegadas. No obstante podemos aplicarle el principio del efecto parallax. Algo tan fácil como poner una posición fija para el fondo  (background-attachment: fixed). Puedes verlo en al sección como se hace.

Pero si queremos auténtica perspectiva tenemos que considerar algunos detalles, como la distancia de cada capa al observador. Esta distancia la vamos a dar como una distancia medida sobre el eje Z (el eje perpendicular a la pantalla), o sea, una coordenada que puede ser positiva o negativa si alejamos el objeto.

Si a un objeto le ponemos una Z positivo lo estamos acercando y si le ponemos un valor negativo lo estamos alejando del punto donde situamos al observador, o sea el ojo.

La distancia entre el ojo y el centro de la pantalla es lo que vamos a llamar perspectiva, por su nombre CSS: perspective. Esta imagen te aclarará la idea. La puerta está al fondo pero yo la veo en la pantalla más pequeña. Si estuviera por delante ocurre al revés: estando delante de la pantalla al proyectarla sobre esta la veré más grande.

 

Es necesario considerar que al alejar el objeto su tamaño y posición relativa cambian aparentemente al situarlos a una cierta distancia del observador. El valor de escalado del tamaño viene dado por una formulita muy sencilla

También las posiciones vertical y horizontal se modifican, pero esta vez la formulita es más compleja. Depende del ancho de la pantalla, del tamaño del objeto, de la posición y de la escala. No te asustes, es probable que no le necesites nunca:

En esta formulita pantalla y objeto son los tamaños ancho o alto dependiendo si calculamos la posición: horizontal o vertical. Lógicamente si los objetos están centrados en la pantalla, la posición no se modifica al situarlos más o menos alejados del observador.

 

Este es el ejemplo que podrás crear si usas el código que te pongo en el siguiente apartado. Aquí los objetos están a distintas distancias del observador y además no van a estar centrados, para observar bien el efecto parallax.

Para ver la idea del prallax en la web puedes probar el siguiente ejemplo. Vas a ver la imagen de arriba: distintos cuadros con colores de fondo colocados uno tras otro, a distintas distancias de la pantalla. Además no están centrados, están colocados a la izquierda del centro de la pantalla. ÇTienes una perspectiva total de la escena.

Primero te pongo los estilos CSS y luego el código de la página

El estilo CSS define los parámetros fundamentales para cada capa y para el punto del observador. En este ejemplo el contenedor principal para el scroll va a ser el elemento body. Le ponemos la propiedad perspective a 2px, sería como la distancia desde la que se ve el plano del dibujo. 

También es necesario ajustar la propiedad transform-style: preserve-3d, para que mantenga el contexto 3D. En chrome esto no afecta, pero es fundamental para Mozilla.

Cada capa (los bloques fondo1 a fodo4) se sitúa sobre el eje Z mediante translateZ(), el argumento indica la posición en la que se coloca cada fondo. Dejamos que el navegador calcule el tamaño y posición de cada uno.

Vamos a dejar que se vean en el tamaño natural, no compensamos el escalado.

Si pruebas el ejemplo en pantalla grande lo verás aún mejor. Pero queda clara la idea: los cuadros cercanos quedan como más grandes que los lejanos. Tenemos una perspectiva gracias al parallax. Como están situados a un lado de la pantalla, la posición también se ve afectada por el alejamiento.

Como ves cada cuadro se escala a medida que se aleja de nosotros.

Esta escala tiene un valor que viene dado por escala = (1 - posZ/presp), donde posZ es la distancia con su signo en el eje Z (translateZ(z) ) mientras que persp es el valor de perspective del cuadro contenedor (en este caso es body).

Si quieres mantener los tamaños de cada cuadro aplicas la propiedad transform: scale(escala). Por ejemplo el cuadro fondo4 tendría una valor de escala igual a (1- (-3/2)) que es 2.5. Le pondrías la propieadad transform: translateZ(-3px) scale(2.5), con lo que lo verás a su ancho real. Pero el efecto parallax no se perderá, su movimiento seguirá siendo relativo a su posición: más lento que el cuadro en primer plano.

Si quieres ver todos los bloques centrados en medio de la pantalla cambia la regla del selector .contenedor div, pon la propiead left a l centro de la pantalla, para eso usa la funcion calc    left: calc(50% - 175px); (175px es la mitad del ancho de los bloques).

Como ves los bloques están centrados y el efecto parallax hace que los distintos cuadros vayan moviéndose a distintas velocidades, los más profundos son los más lentos.

Tienes un ejemplo más elaborado en la sección como se hace