Css3 creare le animazioni con la libreria Animate.css

Prima del CSS3 per creare le animazioni dovevamo ricorrere alle  librerie  jQuery o flash, oggi possiamo avere gli stessi effetti utilizzando il codice CSS3.

In questo articolo vedremo insieme  Animate.css, una libreria  ready-to-use, con  più di 50 effetti di animazione,  compatibile con la maggior parte dei borwsers con il support CSS3.

Per iniziare,  innanzitutto scaricate la libreria dal sito ufficiale.
Il file appena scaricato va incluso nel tag  <head>

<head>
    <link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
</head>

 
Per default Animate.css esegue l’animazione al primo caricamento della pagina .

HTML Markup

Per applicare l’animazione è necessario aggiungere la classe “.animated” all’elemento da animare, con il nome dell’effetto desiderato,  in questo modo:

<div class="demo animated bounce">Testo da animare</div>

 

Codice Completo

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animate.css</title>
    <link rel="stylesheet" type="text/css" media="all" href="animate.css">
   
</head>
<body>
    <div class="demo animated bounce">Testo da animare</div>
</body>
</html>

 
Nel  caso in cui abbiamo la necessità di controllare la nostra animazione,  dobbiamo ricorrere alla libreria jQuery.

 

Animate.css + jQuery: Animare un elemento al click

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animate.css</title>
    <link rel="stylesheet" type="text/css" media="all" href="animate.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
		$(document).ready(function(e) {
			$('#trigger').click(function() {        
			$('.demo').addClass('animated bounce');
			 }); 
		});
    </script>
</head>
<body>
    <a href="#" id="trigger">animate</a>
    <div class="demo">Testo da animare</div>
</body>
</html>

Segnalibro e Share

Costantino Fusco

Sviluppatore di siti internet e di applicazioni web. Programmazione Web: PHP/MySQL HTML/CSS Ajax Javascript wordpress, Strategie SEO

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *