In questa ultima lezione sul Web Motion Design parleremo di Hover.CSS, una libreria per le animazioni interamente scritta in CSS. Tale libreria consente di animare piccoli elementi delle pagine web, quali pulsanti, loghi, immagini SVG e collegamenti. Il codice e la documentazione di questa libreria, realizzata da Ian Lunn, sono disponibili su GitHub.
Installazione
Per installare Hover.CSS dovremo utilizzare un gestore dei pacchetti a scelta tra Bower ed NPM. Scegliamo quello più adatto alle nostre esigenze ed avviamo il comando di installazione.
Per NPM, digitiamo:
npm install hover.css -saveSe invece intendiamo utilizzare Bower, digitiamo:
bower install hover --saveSupporto browser
Dato che Hover.CSS è basato interamente su CSS3, è possibile che alcuni dei suoi effetti più sofisticati non funzionino correttamente sulle versioni più vecchie dei browser. Possiamo verificare la compatibilità dei browser tramite la pagina web CanIuse.com, che riporta l'elenco completo delle versioni (minime) dei browser che supportano ciascuna animazioni/transizione. Tra le altre cose, è anche disponibile una stima della percentuale di utenti che potrebbero non visualizzare correttamente alcune animazioni.
Utilizzo della libreria
Potremo utilizzare le animazioni messe a disposizione da Hover.CSS in due modi: a) copiando ed incollando porzioni del codice sorgente nelle nostre pagine web, o b) linkando il sorgente della libreria all'interno delle pagina web.
Utilizzo di poche animazioni
Nel caso in cui necessitassimo di poche animazioni, al fine di alleggerire la pagina, potrebbe risultare più conveniente localizzare le animazioni che ci serviranno all'interno del sorgente di "hover.css", copiarlo ed incollarlo nella nostra pagina.
Per effettuare questa operazione, teniamo a mente che il codice di ciascuna animazione è sempre preceduto da un commento recante il suo nome. Ad esempio, per l'animazione "Buzz", troveremo la seguente sequenza:
/* Buzz */
CODICE CSS DELL'ANIMAZIONE BUZZSi noti che il nome di ciascuna classe della libreria Hover.CSS è sempre preceduto dal prefisso hvr-. Ciò fa sì che non si generino conflitti con altre librerie simili.
Utilizzo dell'intera libreria
Qualora avessimo la necessità di utilizzare massicciamente le animazioni contenute in Hover.CSS, risulterà più conveniente porre il file hover-min.css all'interno delle directory
dei fogli di stile del nostro sito web.
Tale file rappresenta la versione ottimizzata (o minificata) del file hover.css, che consentirà l'interpretazione più rapida del codice CSS in esso contenuto.
A questo punto non rimarrà che importare il foglio di stile direttamente nel tag <head> delle nostre pagine web:
<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>Per utilizzare le animazioni di Hover.CSS, non dovremo fare altro che associare la classe .hrv-nome_classe agli oggetti che si intendono animare nel codice HTML.
Elenco completo delle categorie di animazioni
Per ottenere l'elenco completo delle animazioni fornite da Hover.CSS, è possibile visionare la pagina web dimostrativa di Hover.CSS. Di seguito riassumiamo tutte le categorie di animazioni ed il loro relativo utilizzo all'interno delle pagine web:
- Transizioni 2D: semplici transizioni 2D per piccoli elementi quali bottoni o loghi
Figura 13. Animazione "grow"
- Transizioni di sfondo: transizioni adatte al passaggio "dolce" tra diverse pagine web
Figura 14. Animazione "sweep to left"
- Icone: probabilmente una delle migliori idee di Hover.CSS. Ciascuna classe appartenente
a questa categoria consentirà di ottenere animazioni relative a piccole icone, quali telefono, casa, like, più/meno, ecc.Figura 15. Animazione "icon forward"
- Transizioni di bordo: transizioni adatte all'evidenziazione di elementi di menù
Figura 16. Animazione "overline from left"
- Ombreggiature: transizioni che uniscono il movimento dell'oggetto animato assieme al disegno della sua ombra
Figura 17. Animazione "shadow radial"
- Fumetti: categoria di animazioni che consente di imitare il comportamento dei "fumetti".
Utile per mostrare spiegazioni sull'utilizzo/significato di oggetti della pagina webFigura 18. Animazione "bubble float left" (click per ingrandire)
Note sull'uso delle animazioni per le icone
Le animazioni per le icone devono essere abbinate al disegno della relativa icona, che sfortunatamente non viene fornito da Hover.CSS. Per ovviare a questo problema, dovremo utilizzare una libreria per le icone, congiuntamente ad Hover.CSS. Nell'esempio illustrato all'interno del progetto GitHub, notiamo come sia possibile importare la libreria FontAwesome all'interno dell'head della nostra pagina web:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">Successivamente, si potrà associare l'animazione all'icona effettiva, con il seguente codice:
<a href="#" class="hvr-icon-forward">
Icona freccia
<i class="fa fa-chevron-circle-right hvr-icon"></i>
</a>Chiaramente, saremo liberi di utilizzare qualunque altra libreria per le icone (a patto che sia supportata all'interno delle pagine web). Qualora volessimo inserire delle icone personalizzate all'interno delle pagine web, potremo utilizzare la seguente tecnica:
<a href="#" class="hvr-icon-spin">
Icona che ruota
<img src="icona_freccia_curva.svg" class="hvr-icon" />
</a>Licenze
Hover.CSS è stato reso disponibile dal suo autore con licenza open source (MIT license) nel caso di utilizzo personale, e licenza commerciale qualora venga utilizzato all'interno di software a pagamento.
È possibile acquistare le licenze commerciali sulla pagina web dell'autore di Hover.CSS.
Mentre nel caso di licenza open source avremo a disposizione l'utilizzo illimitato in applicazioni personali e aggiornamenti gratuiti (a patto che il software sviluppato rimanga open source), la licenza a pagamento si presenta in tre diverse modalità: commerciale, commerciale estesa e OEM. La licenza commerciale prevede l'utilizzo di Hover.CSS in una sola applicazione che potrà essere venduta una sola volta. Il codice deve rimanere di proprietà dello sviluppatore, mentre gli aggiornamenti alla libreria saranno gratuiti. La licenza commerciale estesa è molto simile (un po' più cara della precedente) ma consentirà l'utilizzo di Hover.CSS in un numero infinito di applicazioni. Infine, la licenza OEM dovrà essere acquistata nel caso in cui le applicazioni da noi sviluppate (es. tool di sviluppo) consentano ad utenti terzi di sviluppare ulteriori applicazioni che utilizzino le animazioni di Hover.CSS.