Efecto Parallax mediante CSS3

CSS3 nos permite acceder a diferentes niveles de personalización visual en nuestros sitios web, desde cajas con bordes redondeados, efectos de sombra en el texto, manejo de diferentes tipografías con @font-face, animaciones entre otros.

En esta ocasión aprovecharemos la propiedad de multiple-backgrounds para lograr un efecto llamado Parallax, que antes requería de insertar diferentes divs sin ningún sentido semántico para nuestro código HTML pero que hoy es más sencillo gracias a las hojas de estilo.

Parallax es una técnica donde se aplica profundidad a los diferentes elementos mediante el uso de capas. Esto permite simular un movimiento de cámara al estilo de las películas sci-fi donde se crean movimientos en el espacio que nos dejan percibir lo lejos que se encuentran las estrellas de nuestro sistema solar.

NOTA: Anteriormente en Cristalab ya se había publicado un interesante tutorial de Parallax Scrolling por si gustan complementar esta lectura.

Selección de Imágenes

Para nuestro ejemplo utilizaremos una imagen generada por mi amigo y colega Juan Silva @kidbuda de www.kidbudda.com al cuál agradezco su valiosa contribución. Como es solamentente un ejemplo podemos darnos ciertos lujos en cuanto al peso de las imágenes pero ya en un sitio web de producción recomendaría que el tamaño de las mismas no excediera los 100 kb.



Como podemos apreciar de sitios web que ya utilizan esta técnica como Silverback App o Nike Better World es recomendable tener una imagen flotante de preferencia en múltiples capas, para nuestro ejemplo tendremos petalos1.png, petalos2.png y petalos3.png para posicionarlos al frente, en medio y al fondo de la composición. Y como base dejaremos a la chica sexy con su escenario para crear el efecto de movimiento al rescalar la ventana del navegador.

Es importante hacer notar que los pétalos más cercanos (los que se ven más grandes) deben de tener un efecto de blur aplicado para crear esa ilusión de desenfoque y por ende los pétalos de tamaño mediano y pequeño lucen con mayor nitidez.

Código CSS3 para crear Parallax

El código CSS que utilizaremos requiere que tengamos un selector de tipo ID asociado a nuestro contenedor, inclusive podría ser el body pero en este caso utilizaremos un div con un ID wrapper asignado.

Código :

body {
   margin:0px;
   padding:0px;
   background: #FE81B4;
}

#wrapper {
   position:absolute;
   left:0px;
   right:0px;
   top:0px;
   bottom:0px;
   background:url(petalos1.png) repeat-x 50%, url(petalos2.png) repeat-x 70%, url(petalos3.png) repeat-x 120%, url(kid_buda_sexy.jpg) no-repeat;
}

Para posicionar las demás capas solamente es necesario pensar en porcentajes y así cuando asignemos la posición en los diferentes fondos sepamos hacia donde se realizará el movimiento y con que rapidez, la cuál será proporcional al borde de la ventana que estaremos rescalando.

Resultado final del Efecto Parallax con CSS3

Pueden contactarme en mi twitter @edgarparada para cualquier duda relacionada con este tutorial, espero que les haya gustado

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