SummArg | Cursos y recursos para webmasters

23/06/2011

Animación de elementos con movimientos circulares: jQuery Circulate

Circulate es un plugin para jQuery que permite animar con movimientos circulares cualquier elemento de tu web. Permite ajustar la velocidad, la distancia en la que se moverá verticalmente, la distancia en la que se moverá horizontalmente, porcentaje de crecimiento del objeto a medida que se mueve, posibilidad de efectuar el movimiento una sola vez o indefinidamente (loop), posibilidad de modificar el z-index en cada instancia de la animación. Esto último posibilita el efecto de que un elemento pase por delante y por detrás de otro, a medida que modificamos el valor del z-index.

Para incluirlo en nuestro proyecto, descargamos sus archivos y lo insertamos entre etiquetas <head> del siguiente modo:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.easing.1.2.js'></script>
<script type='text/javascript' src='js/jquery.circulate.js'></script>

Podemos encontrar el archivo de jQuery aquí, y el de easing aquí.

Luego pasamos la configuración del script.
<script>
$("#anything).circulate({
speed: 400, // Speed of each quarter segment of animation, 1000 = 1 second
height: 200, // Distance vertically to travel
width: 200, // Distance horizontally to travel
sizeAdjustment: 100, // Percentage to grow or shrink
loop: false, // Circulate continuously
zIndexValues: [1, 1, 1, 1] // Sets z-index value at each stop of animation
});
</script>

Finalmente colocamos una animación con botón de inicio y stop.
$("#anything").circulate("Stop");

Ir a Circulate | Visto en Kabytes

Dejar un comentario