Parallax con CSS3
Escrito por Revista NeoPixel Jueves, 14 de Julio de 2011 08:54
Texto por Edgar Parada (@edgarparada).
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.
Da click para ver el Resultado final del Efecto Parallax con CSS3. (Al re-escalar la ventana del navegador podrás ver el efecto).
Selección de Imágenes
Para nuestro ejemplo utilizaremos una imagen generada por mi amigo y colega Juan Silva @kidbudda 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 100kb.
Como podemos apreciar de sitios web que ya utilizan esta técnica como Silverback App (http://www.silverbackapp.com/) o Nike Better World (http://www.nikebetterworld.com/) 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 re-escalar 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.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
Da click para ver el Resultado final del Efecto Parallax con CSS3. (Al re-escalar la ventana del navegador podrás ver el efecto).
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 re-escalando.
Pueden contactarme en mi twitter @edgarparada para cualquier duda relacionada con este tutorial, espero que les haya gustado :-)
RSS feed Comments
