f Animaciones con CSS - Animate.css - como hacer animaciones fácilmente - El Maquetador Web, Maquetación Freelance, Curso HTML HTML5 CSS Tutorial Diseño Responsive Adaptable

¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

24.2.15

Animaciones con CSS - Animate.css - como hacer animaciones fácilmente

Hoy vamos a hablar de una librería que previamente hemos puesto en la sección de recursos para maquetadores de este blog. Se trata de animate.css, un recurso que nos permite crear animaciones con CSS fácilmente.

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.

No hay comentarios:

Publicar un comentario