Animación en CSS: Parallax Scrolling

El Parallax Scrolling (PS en adelante) es una técnica de animación utilizada en diversos medios, que tiene su origen en la industria de los videojuegos a comienzos de los 80. El PS consigue crear un efecto de profundidad mediante la superposición de varias capas. Actualmente se está extendiendo su uso en el diseño de páginas web por lo que vamos a ver de forma sencilla su implementación en CSS.

Concepto de Parallax Scrolling

Una de las primeras páginas (tal vez la primera) en usar el PS dentro de su diseño fue Silverback, así que os aconsejo que hagáis un inciso en vuestra lectura para hacerle una visita.

Si cambiamos el tamaño de la ventana de nuestro navegador vemos como en el header de la página las lianas reaccionan de diferente forma, como si en vez de un navegador estuviésemos moviendo una cámara.


Esto se consigue mediante la superposición de varias capas con imágenes con fondo transparente, que mediante diferencias de velocidad en su movimiento, crean la sensación que buscamos.

Implementación en CSS de Parallax Scrolling

Vamos a crear un ejemplo fácil con tres capas que recrearán un cielo con nubes. En primer lugar crearemos una imagen azul para el fondo, y por encima colocaremos dos capas con nubes y fondo transparente (usaremos un formato PNG).

Código :

body {
background:#66ccff url(../images/cielo.jpg) 20% 0 repeat-x;
}

div#nubesLejos{
position:absolute;
z-index:997;
background:transparent url(../images/nubesLejos.png) 40% 0 repeat;
margin:0;
padding:0;
width:100%;
height:100%;
}

div#nubesCerca{
position:absolute;
z-index:998;
background:transparent url(../images/nubesCerca.png) 150% 0 repeat;
margin:0;
padding:0;
width:100%;
height:100%;
}

La clave del PS se encuentra en las declaraciones background. Como veis posicionamos la imagen de fondo mediante porcentajes diferentes para cada capa. Así conseguimos que cuando redimensionamos la ventana, las imágenes de las distintas capas reaccionen de diferente forma y den la sensación de movimiento.

Para que el efecto de sensación de profundidad nos aseguramos que las capas con mayor z-index (capas superiores) tengan un porcentaje de posición mayor que las que tengan por debajo. Esto se traduce visualmente en un movimiento más rápido.

Podéis ver el ejemplo o bien descargarlo.

Un saludo para todos los Clabers!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.