Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Una poderosa herramienta para hacer animaciones

Una poderosa herramienta para hacer animaciones 06.OCT.13

Alvaro José Rios Ch
Fundador WebBizarro

Las animaciones CSS son una poderosa herramienta que podemos usar para dar a nuestros sitios web un toque profesional y divertido, pero muchas veces es algo tedioso colocar múltiples animaciones y sincronizarlas para que funcionen como un reloj Suizo.

AnimoJS es una pequeña pero poderosa librería en javascript que permite hacer animaciones con CSS pero con la ventaja del manejo de eventos de javascript, con CSS puedes disparar las animaciones al cargar la página o al hacer hover sobre un objeto, pero con javascript puedes disparar la animación cuando lo desees incluso puedes apilar animaciones para que se disparen una después de la otra.

Puedes descargar la librería directamente desde github, la única dependencia de animojs es Jquery 2 o superior y puedes usar el pequeño css con algunas animaciones predeterminadas, pero también puedes crear tus propias animaciones.

Comenzar a hacer animaciones es tan simple como importar los archivos

<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="animo.js" type="text/javascript"></script>
<link href="animate+animo.css" rel="stylesheet" type="text/css">

Y colocar una línea de código para iniciar una de las animaciones predeterminadas

$('#demo1').animo( { animation: 'tada' } );

O apilar un par de animaciones que es tan fácil como cambiar el string por un arreglo con los nombres de las animaciones.

$('#demo2').animo( { animation: ['tada', 'bounce'], duration: 2 } );

Una buena alternativa para tener en cuenta para el próximo proyecto.