In questa lezione parleremo di una libreria per il web motion design molto popolare: Animate.css. Animate.css non è altro che un insieme di classi di animazioni utili per le home page, gli slider e le immagini. La libreria è stata sviluppata da Daniel Eden che ha reso disponibile il progetto e le istruzioni per l’installazione all’interno del repository su Github.
Installazione
Potremo scegliere se installare la libreria localmente o se collegarla remotamente all’interno delle nostre pagine web. Per l’installazione locale dovremo utilizzare un package manager a scelta tra Bower o NPM. Per ogni approfondimento necessario, rimandiamo alle nostre guide, rispettivamente per l’installazione di Bower o NPM.
Una volta installato uno dei due package manager, eseguiremo il comando opportuno per installare Animate.css. Se usiamo Bower, digitiamo quanto segue:
bower install animate.css --saveAltrimenti, se abbiamo optato per NPM:
npm install animate.css --saveUtilizzo
Per utilizzare la libreria non dobbiamo far altro che inserirla nelle nostre pagine HTML Se abbiamo scelto l’installazione locale, utilizziamo i seguenti tag:
<head>
<link rel="stylesheet" href="animate.min.css">
</head>Se abbiamo deciso, invece, di utilizzare un link alla libreria remota, dobbiamo invece utilizzare i tag seguenti:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<head>Per animare gli elementi HTML, non dovremo far altro che associare ad essi la classe animated, seguita da un eventuale infinite (se vogliamo che l’animazione venga ripetuta infinite volte) ed il nome della classe dell’animazione che intendiamo utilizzare. L’elenco completo delle classi di animazioni è il seguente:
| Nome classe | ||
|---|---|---|
| bounce | flash | pulse |
| rubberBand | shake | headShake |
| swing | bounceOutLeft | fadeInUpBig |
| tada | bounceOutRight | fadeOut |
| wobble | bounceOutUp | fadeOutDown |
| jello | fadeIn | fadeOutDownBig |
| bounceIn | fadeInDown | fadeOutLeft |
| bounceInDown | fadeInDownBig | fadeOutLeftBig |
| bounceInLeft | fadeInLeft | fadeOutRight |
| bounceInRight | fadeInLeftBig | fadeOutRightBig |
| bounceInUp | fadeInRight | fadeOutUp |
| bounceOut | fadeInRightBig | fadeOutUpBig |
| bounceOutDown | fadeInUp | flipInX |
| flipInY | flipOutX | flipOutY |
| lightSpeedIn | lightSpeedOut | rotateIn |
| rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
| rotateInUpRight | rotateOut | rotateOutDownLeft |
| rotateOutDownRight | rotateOutUpLeft | rotateOutUpRight |
| hinge | jackInTheBox | rollIn |
| rollOut | zoomIn | zoomInDown |
| zoomInLeft | zoomInRight | zoomInUp |
| zoomOut | zoomOutDown | zoomOutLeft |
| zoomOutRight | zoomOutUp | slideInDown |
| slideInLeft | slideInRight | slideInUp |
| slideOutDown | slideOutLeft | slideOutRight |
| slideOutUp | ||
Per animare, ad esempio, un tag di tipo h2, basterà utilizzare la seguente linea di codice:
<h2 class="animated infinite rollOut">Esempio di rollOut</h2>Animate.css in azione: costruire una pagina animata in 10 minuti
In questo esempio, basato su un'idea di Hudson Allen, vedremo come creare una home page animata e dal look accattivante con poche linee di codice.
La home page è costituita da quattro sotto-animazioni. La prima serve a catturare l’attenzione del navigatore, che verrà immediatamente attratto dall’effetto di scorrimento verso il basso del testo:
Figura 5. Scorrimento verso il basso (classe “bounceInDown”) (click per ingrandire)
Il codice è veramente semplice e consiste in un tag h1 (titolo), un sottotitolo h2 ed un tag span per creare l’effetto “freccia in movimento”:
<header>
<h1 class="animated bounceInDown">Animate.css</h1>
<h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>
<span class="animated bounce"></span>
</header>Il movimento della freccia viene prodotto dal codice seguente:
header span.animated {
animation-duration: 2.5s;
animation-iteration-count: infinite;
}La seconda animazione, di entrata a scorrimento del testo, è leggermente più complessa perché viene attivata non appena la scritta diventa visibile:
Figura 6. Effetto di scrolling left-to-right (classe “fadeInLeft”) (click per ingrandire)
Per implementare questo tipo di animazione, dovremo necessariamente ricorrere a Javascript, aiutandoci talvolta con jQuery. Supponiamo di volere animare un frammento dell’esempio mostrato, il testo “Number One”:
<div class="scroll-animations">
<div class="animated">
<h3>Number One</h3>
</div>
</div>Il codice Javascript per l’animazione non fa altro che verificare se ciascuno degli elementi contenuti all’interno del div “scroll-animations”, di classe animated, è visibile. In caso affermativo,
eseguirà la funzione per aggiungere a tali elementi la classe fadeInLeft che fa scorrere il testo da sinistra verso destra:
$(window).scroll(function() {
$('.scroll-animations .animated').each(function() {
if (isScrolledIntoView(this) === true) {
$(this).addClass('fadeInLeft');
}
});
});La terza animazione, che simula lo “shaking” di un form contenente dati errati, è veramente semplice:
Figura 7. Effetto di errato inserimento dei dati in un form (classe “shake”) (click per ingrandire)
Fondamentalmente, quando andremo a cliccare sul pulsante Send, verrà eseguita una funzione Javascript che controlla il riempimento dei campi nome, email e messaggio.
Ai campi non correttamente compilati verranno aggiunte le classi form-error, animated e shake, che daranno luogo allo scuotimento ed alla bordatura rossa:
$('button').on('click', function() {
if ($('#name').val() === '') {
$('#name').addClass('form-error animated shake')
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass('animated shake');
});
}
else {
$('#name').removeClass('form-error');
}
});Dato che l’obiettivo è mostrare una sola animazione di scuotimento, al termine di quest’ultima, le classi animated e shake saranno rimosse dall’elemento.
La classe form-error serve semplicemente a creare un riquadro rosso per i campi erroneamente compilati, e verrà rimossa nel momento in cui il campo sarà correttamente compilato:
.form-error {
border-color: #F46036;
}Terminiamo con l’ultima animazione. In questo caso, ad ogni click sulla scritta “click me”, quest'ultima verrà “sganciata” dal suo contenitore e darà l’impressione di cadere verso il basso:
Figura 8. Caduta del testo verso il basso (classe “hinge”) (click per ingrandire)
La scritta viene dichiarata all’interno di un tag h4:
<div class="funky-animations">
<h4>Click Me</h4>
</div>Infine, l’animazione che viene abilitata dopo il click è hinge:
$('.funky-animations h4').on('click', function() {
$(this).addClass('animated hinge').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
$(this).removeClass('animated hinge');
});
});