Como poner un efecto colgante y movimiento pendular a imágenes

Instalando este código lograremos un efecto especial para una o varias imágenes, el cual consiste en que esta se mueve como si estuvieran colgando de una clavija.

Planeta Blogger nos trae este efecto  muy interesante que da la impresión que las imágenes están colgadas de una clavija o clavo, por lo que se mueven  en forma de péndulo, creemos que será muy atractivo para nuestros visitantes.

Para instalar los códigos correspondientes, nos vamos a Plantilla / Editar HTML:

Estando allí, ubicaremos esta etiqueta:

Una vez que encontramos </head> pegaremos el siguiente código en la parte de abajo o sea después:

<style>

.swing{

 -webkit-animation:swinging 10s ease-in-out 0s infinite;

 -moz-animation:swinging 10s ease-in-out 0s infinite;

 animation:swinging 10s ease-in-out 0s infinite;

 -webkit-transform-origin:50% 0;

 -moz-transform-origin:50% 0;

 transform-origin:50% 0;

}

@-webkit-keyframes swinging{

 0% { -webkit-transform: rotate(0); }

 5% { -webkit-transform: rotate(10deg); }

 10% { -webkit-transform: rotate(-9deg); }

 15% { -webkit-transform: rotate(8deg); }

 20% { -webkit-transform: rotate(-7deg); }

 25% { -webkit-transform: rotate(6deg); }

 30% { -webkit-transform: rotate(-5deg); }

 35% { -webkit-transform: rotate(4deg); }

 40% { -webkit-transform: rotate(-3deg); }

 45% { -webkit-transform: rotate(2deg); }

 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

 100% { -webkit-transform: rotate(0); }

}

@-moz-keyframes swinging{

 0% { -moz-transform: rotate(0); }

 5% { -moz-transform: rotate(10deg); }

 10% { -moz-transform: rotate(-9deg); }

 15% { -moz-transform: rotate(8deg); }

 20% { -moz-transform: rotate(-7deg); }

 25% { -moz-transform: rotate(6deg); }

 30% { -moz-transform: rotate(-5deg); }

 35% { -moz-transform: rotate(4deg); }

 40% { -moz-transform: rotate(-3deg); }

 45% { -moz-transform: rotate(2deg); }

 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

 100% { -moz-transform: rotate(0); }

}

@keyframes swinging{

 0% { transform: rotate(0); }

 5% { transform: rotate(10deg); }

 10% { transform: rotate(-9deg); }

 15% { transform: rotate(8deg); }

 20% { transform: rotate(-7deg); }

 25% { transform: rotate(6deg); }

 30% { transform: rotate(-5deg); }

 35% { transform: rotate(4deg); }

 40% { transform: rotate(-3deg); }

 45% { transform: rotate(2deg); }

 50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */

 100% { transform: rotate(0); }

}

</style> 

Guardamos los cambios.

Ahora nos vamos a Diseño / Añadir un Gadget / JavaScript/HTML:

En la ventana que aparece; ponemos un título e insertamos el código siguiente:

<img class="swing" src="Aqui la URL de la imagen" />

<img class="swing" src=" Aqui la URL de la imagen " style="

 animation-delay: 0.8s;

 -webkit-animation-delay: 0.8s;

 -moz-animation-delay: 0.8s;

 animation-delay: 0.8s;

 "

/>

<img class="swing" src=" Aqui la URL de la imagen " style="

 animation-delay: 0.5s;

 -webkit-animation-delay: 0.5s;

 -moz-animation-delay: 0.5s;

 animation-delay: 0.5s;

 "

/>

En donde está en color Azul, pondremos la URL de la imagen que vamos a exhibir y el tamaño de la misma es al gusto de cada quien. Si usted quiere poner una imagen solamente, puede dejar nada más una parte del código.

Recuerde que para obtener la URL de una imagen, antes debemos subirla  a un sitio de alojamiento, como Picasa, etc.

El resultado lo podemos ver en la Sidebar de Planeta Blogger.

Eso es todo.