JMiur [E]

Crear animaciones con CSS es interesante pero engorroso; además, para que funcionen, hay que agregar los prefijos de cada navegador lo que hace que el código a escribir sea largo. De todos modos, aunque sea experimental, es algo para probar y ver qué pasa. Para más información: Mozilla | Chrome/Safari | w3.org.

En este caso, se trata de un ejemplo creado por David Walsh, un grupo de imagenes superpuestas que se expanden cuando ponemos el puntero del ratón encima de ellas.

El HTML es muy simple:
<a href="javascript:void(0);" class="album">
  <img src="URLIMAGEN_1" class="photo1" />
  <img src="URLIMAGEN_2" class="photo2" />
  <img src="URLIMAGEN_3" class="photo3" />
</a>
Las reglas de estilo básicas también:
<style>
  .album {
    display:block;
    position: relative;
    vertical-align: top;
    width: 250px;
    z-index: 5;
  }
  .album img {
    border: 10px solid #ABC;
    display: block;
    height: 250px;
    left: 0;
    position: absolute;
    top: 0;
    width: 250px;
  }
  /* un agregado para que las imágenes se ponga en primer plano */
  .album img:hover {
    z-index: 1000;
  }
</style>
Y por último, la animación en si misma:

<style>
  @-moz-keyframes image1 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image1 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }

  @-moz-keyframes image2 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }
  @-webkit-keyframes image2 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }

  @-moz-keyframes image3 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image3 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }

  .album:hover .photo1, .album:focus .photo1 {
    -moz-animation-name: image1;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
    -webkit-animation-name: image1;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
  }
  .album:hover .photo2, .album:focus .photo2 {
    -moz-animation-name: image2;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
    -webkit-animation-name: image2;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
  }
  .album:hover .photo3, .album:focus .photo3 {
    -moz-animation-name: image3;
    -moz-animation-duration: .2s;
   -moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
    -webkit-animation-name: image3;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
  }
</style>

10 comentarios:

CaTa  

Esto se ve buenisimo!! me gustó!

Responder
Unknown  

Maravilloso Jmiur! :)

Responder
Gem@  

Genial :) y todo CSS es como comprar algo sin conservantes ni colorantes :)

Responder
Johnny Uve  

Un estupendo efecto para sorprender a los usuarios de nuestro blog o web. El CSS es magico y tiene muchas posibilidades. Saludos JMiur.

Responder
Beben Koben  

cool master ;)

Responder
Tapestry Workerman  

Muy bueno!!
Igual me animo a ponerlo... le daré un par de vueltas y le buscaré hueco.
Un saludo.

Responder
Unknown  

Se ve genial! Solo poniendo la url de las imagenes ya esta?

Responder
Karla Castañeda  

Si tienes razón puede resultar un poco engorroso precisamente por lo que mencionas, hay que escribir lineas de código cada navegador, y al rato terminaremos ahogándonos entre tantas lineas, tal vez en un futuro cuando haya un standar y todos los navegadores lo sigan sea otro rollo.

Hablando de navegadores, sabes que ahora Chrome ya no tiene el problema en la rotación de las imágenes; sino mal recuerdo creo que a ti te comentaba: que al rotar una imagen esta se veía la orilla como "dentada", pues parece ser que ya arreglaron el problema, y sabes una cosa, Chrome poco a poco me a sabido conquistar, últimamente lo uso más que FF, que lo tenía en un altar, resultó todo un galán Chrome...

Responder
Luis Reyes  

excelente!! Jmiur eres un maestro

Responder
Patricia B.  

Muy bueno tu blog :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR