Efecto Parallax con 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.

CSS3 logo

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.

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.

Efecto Parallax CSS3

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.

Efecto Parallax con CSS3

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.


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🙂

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s