Magic Animations è un pacchetto di animazioni scritte in CSS, che consente di inserire effetti speciali all’interno delle pagine web. La libreria è stata sviluppata da Christian Pucci, che l'ha resa disponibile gratuitamente su Github.
Installazione e supporto
L’installazione di Magic Animations è veramente semplice. È necessario solo il gestore dei pacchetti Bower.
Chi non ne conosce le funzionalità, può fare riferimento alla
guida all’installazione di HTML.it.
Dopo averlo installato, digitiamo il seguente comando:
bower install magicMagic Animations è supportato praticamente da tutti i browser. Di seguito sono elencate le versioni dalle quali parte il supporto:
| Browser | Versione minima |
|---|---|
| Chrome | 31 |
| Firefox | 31 |
| Safari | 7 |
| Opera | 27 |
| Explorer | 10 |
Utilizzo
Per utilizzare la libreria, è necessario inserirla all’interno del tag <head> delle pagine HTML come segue:
<link rel="stylesheet" href="magic.css">Gli elementi animati della pagina HTML dovranno essere etichettati con la coppia di classi magictime nome_classe. Potremo utilizzare le classi di Magic Animations anche tramite jQuery:
$('.classe').hover(function () {
$(this).addClass('magictime nome_classe');
});Nella seguente tabella sono riportate le principali classi messe a disposizione dalla libreria. I nomi riportati devono essere utilizzati per rimpiazzare il placeholder nome_classe, che abbiamo utilizzato nelle righe precedenti:
| Categoria | Nome classe |
|---|---|
| Effetto magico | magic twisterInDown twisterInUp swap |
| Dissolvenza | puffIn puffOut vanishIn vanishOut |
| Effetto statico |
openDownLeft openDownRight openUpLeft openUpRight openDownLeftReturn openDownRightReturn openUpLeftReturn openUpRightReturn |
| Effetto statico con dissolvenza |
openDownLeftOut openDownRightOut openUpLeftOut openUpRightOut |
| Prospettiva |
perspectiveDown perspectiveUp perspectiveLeft perspectiveRight perspectiveDownReturn perspectiveUpReturn perspectiveLeftReturn perspectiveRightReturn |
| Rotazione | rotateDown rotateUp rotateLeft rotateRight |
| Scorrimento |
slideDown slideUp slideLeft slideRight slideDownReturn slideUpReturn slideLeftReturn slideRightReturn |
| Spazio |
spaceOutUp spaceOutRight spaceOutDown spaceOutLeft spaceInUp spaceInRight spaceInDown spaceInLeft |
Per animare un <div> potremo utilizzare la seguente linea di codice:
<div class="magictime magic">Utilizzo della classe magic</div>Per impostare la durata delle animazioni (che di default è impostata ad 1 secondo) dovremo utilizzare un foglio di stile locale associato alla pagina web:
.magictime.magic {
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
}La demo di ciascuna delle animazioni fornite dalla libreria è disponibile a questa pagina web.
Esempio pratico
L’obiettivo di questo esempio non è tanto capire i tecnicismi implementativi delle animazioni, quanto invece introdurre la necessità
di pensare alle pagine web in termini di “animazioni”. In generale, sarà necessario limitarsi a progettare le animazioni (e chiaramente, ancora prima, il layout) senza pensare troppo al codice: data la vastità di librerie che avremo a disposizione, troveremo sempre le animazioni che fanno al caso nostro. In questo esempio dimostrativo, riproporremo le animazioni della home page vista nella lezione precedente.
Ricreeremo degli effetti molto simili sulla stessa home page, sfruttando praticamente il 100% del codice HTML, CSS e Javascript dell’esempio precedente, ma utilizzando la libreria Magic Animations. Il codice dell’home page alla quale ci ispireremo è disponibile su Codepen.io.
L’home page è costituita da quattro animazioni:
- entrata ad effetto del titolo della home page;
- sliding del testo;
- animazione di errore inserimento dei dati;
- scritta che “cade”.
La prima animazione che vogliamo mostrare è lo scorrimento del titolo della home page ed il cursore che indica di scorrere più in basso.
Rispetto al codice originario ho riadattato le classi di Animate.css a quelle di Magic Animations:
<h1 class="magictime spaceInUp">Magic Animation Demo</h1>
<h2 class="magictime spaceInUp">Enjoy with Magic Animation CSS library</h2>
<span class="magictime tinUpIn"></span>Nel foglio di stile adesso troveremo un blocco header span.magictime. L’animazione è stata impostata ad un secondo per dare l’effetto di movimento rapido al cursore:
header span.magictime{
animation-duration: 1s;
}La seconda animazione ha richiesto uno sforzo leggermente maggiore per essere riadattata:
Per prima cosa abbiamo rietichettato i div che scorrono come segue:
<div class="magictime">
Mentre la porzione di Javascript che controlla se l’elemento è visibile è stata modificata utilizzando le classi magictime e tinLeftIn:
$(window).scroll(function() {
$('.scroll-animations .magictime').each(function() {
if (isScrolledIntoView(this) === true) {
$(this).addClass('tinLeftIn');
}
});
});Il compito per riadattare la terza animazione, invece, è stato pressochè nullo. Infatti non abbiamo fatto altro che modificare il codice Javascript, sostituendo tutte le occorrenze della classe animated shake con magictime tinUpIn:
Infine, lo stesso vale per la quarta animazione, dove abbiamo semplicemente utilizzato le classi magictime e openUpLeftOut per simulare il testo che cade:
Il codice della home page riadattata è allegato a questa lezione.