Generalmente las animaciones en las web viven gracias a javascript (y funciona muy bien) pero eso no quiere decir que sea la única opción. Podemos obtener efectos muy llamativos usando solamente CSS, sobre todo en su última versión (hasta el momento la 3).
En este post vamos a ver la propiedad transform, que no solo nos permite modificar elelemtos si no que lo hace de forma progresiva, sin saltos bruscos.
Primero en nuestro html ponemos las imagenes dentro de un elemento a , para que el efecto suceda al pasar por encima el raton, en este caso usaremos el pseudoelemento :focus, pero podría valer tambien :hover
<a href="#1" class="album"> <img src="mifoto1.jpg" class="photo1"> <img src="mifoto1.jpg" class="photo2"> <img src="mifoto1.jpg" class="photo3"> </a>
Y ahora en nuestro archivo CSS, situamos el elemento album de forma relativa, le damos el tamaño adecuado y lo situamos en una capa elevada. Tambien, para que funcione correctamente, le decimos que es un bloque:
.album {
position: relative;
left:150px;
z-index: 5;
width: 250px;
vertical-align: top;
display:block;
height:250px;
}
Situamos las imagenes de forma absoluta porque queremos ponerlas unas encima de otras
.album img {
position: absolute;
top: 0;
left: 0;
border: 5px solid #f3f3f3;
box-shadow: 1px 1px 2px #666;
-webkit-box-shadow: 1px 1px 2px #666;
-moz-box-shadow: 1px 1px 2px #666;
width:250px;
height:250px;
display:block;
transition: all .3s ease-in-out;
}
Ojo a la ultima propiedad: transition. Aqui es donde establecemos que el movimiento será suave. Los valores son all (para todas las transiciones que afecten al elemento) .3s es la duración de dicho efecto y ease-in-out es el timing, la aceleración. Podríamos poner un 4º valor que sería el retardo con que se activará el efecto.
Y por ultimo establecemos la transofrmacion que le ocurrirá a cada uno de los elementos img
.album:hover .photo1, .album:focus .photo1 {
transform: rotate(-6deg) translate(-100px, -3px) scale(1.1);
}
.album:hover .photo2, .album:focus .photo2 {
ms-transform: rotate(0deg) translate(0, -3px) scale(1.1);
}
.album:hover .photo3, .album:focus .photo3 {
transform: rotate(6deg) translate(100px, -3px) scale(1.1);
}
Y con esto ya tenemos nuestro efecto de movimiento solamente con css. La ventaja de no usar javascript es que carga menos el navegador y que en pcs de lugares públicos como bibliotecas donde está deasactivado seguiremos teniendolo, el inconveniente es que solo funciona con navegadores compatibles con css3, como la ultima version de firefox u opera, pero no es compatible con internet explorer, al menos de momento (version 9).
fuente original: blog de David Walls
Comentarios