Su uso es muy sencillo, sólo tenemos que incluir el archivo CSS de la librería y añadir a los elementos que queramos animar la clase .animated y también otra clase con el nombre de la animación que queramos.
Incluimos la librería en la etiqueta HEAD de nuestro documento HTML:
<head> <link rel="stylesheet" href="animate.min.css"> </head>
Agregamos las clases necesarias a nuestro elemento HTML, en este caso un párrafo:
<p class="animated bounceIn">parrafo 1</p>
El ejemplo completo en jsfiddle.
Puedes conseguir muchos efectos combinando animate.css con jQuery. Por ejemplo, puedes añadir las clases de la animación de forma dinámica. Veamos un ejemplo:
Primero añadimos la librería jQuery:
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
Y a continuación incluímos nuestro código jQuery:
$("p").click(function() {
$('#tuelemento').addClass('animated bounceIn');
});
En el ejemplo hemos añadido la clase .animated con el tipo de efecto .bounceIn cuando se hace click en un elemento cuya id es #tuelemento.
Entradas
No hay comentarios:
Publicar un comentario