Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Animate.css: animare testi e immagini

Utilizzare la libreria Animate.css per realizzare animazioni efficace ed accattivanti, facilmente integrabili all'interno di una pagina web moderna.
Utilizzare la libreria Animate.css per realizzare animazioni efficace ed accattivanti, facilmente integrabili all'interno di una pagina web moderna.
Link copiato negli appunti

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 --save

Altrimenti, se abbiamo optato per NPM:

npm install animate.css --save

Utilizzo

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)


Scorrimento verso il basso (classe “bounceInDown”)

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)


Effetto di scrolling left-to-right (classe “fadeInLeft”)

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)


Effetto di errato inserimento dei dati in un form (classe “shake”)

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)


Caduta del testo verso il basso (classe “hinge”)

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');
});
});

Ti consigliamo anche