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

Magic Animations

Utilizzare le funzionalità messe a disposizione dalla libreria CSS Magic Animations per realizzare animazioni complesse e accattivanti in modo semplice.
Utilizzare le funzionalità messe a disposizione dalla libreria CSS Magic Animations per realizzare animazioni complesse e accattivanti in modo semplice.
Link copiato negli appunti

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 magic

Magic 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:

  1. entrata ad effetto del titolo della home page;
  2. sliding del testo;
  3. animazione di errore inserimento dei dati;
  4. 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.

Figura 9. Entrata del titolo della home-page e cursorse (click per ingrandire)

Entrata del titolo della home-page e cursorse

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:

Figura 10. Sliding del testo (click per ingrandire)

Sliding del testo

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:

Figura 11. Animazione di inserimento testo errato (click per ingrandire)

Animazione di inserimento testo errato

Infine, lo stesso vale per la quarta animazione, dove abbiamo semplicemente utilizzato le classi magictime e openUpLeftOut per simulare il testo che cade:

Figura 12. Testo 'Click me' che si 'stacca' dalla pagina (click per ingrandire)

Testo 'Click me' che si 'stacca' dalla pagina

Il codice della home page riadattata è allegato a questa lezione.


Ti consigliamo anche