I browser moderni sono capaci di riprodurre incredibili animazioni e transizioni tramite l’utilizzo di complesse porzioni di codice Javascript. I fogli di stile a cascata (Cascade Style Sheet, CSS) giunti alla versione 3, hanno ampliato le possibilità offerte dal famoso linguaggio di scripting rendendo possibile animare le pagine web con il semplice utilizzo degli stili all’interno delle pagine HTML. Il vantaggio principale è che i fogli di stile, data la loro semplicità, generalmente non riducono le performance delle interfacce grafiche all’interno delle quali vengono intercalati, ma di contro, possono notevolmente migliorarne l’aspetto.
Lo scopo di questa guida sarà, in prima battuta, quello di spiegare come utilizzare animazioni e transizioni CSS3 per abbellire le interfacce grafiche; le spiegazioni verranno corredate da esempi pratici illustrati di animazioni complesse realizzate tramite CSS. Successivamente verranno illustrate le principali librerie CSS per il web motion design e il tipo di effetti grafici che sono in grado di produrre.
Negli esempi proposti si cercherà di sfruttare nel miglior modo possibile le capacità di movimento di CSS piuttosto che cercare di “reinventare la ruota”, scrivendo lunghe porzioni di codice in Javascript e/o sfruttando jQuery. L’utilizzo del linguaggio di scripting verrà dunque limitato al minimo indispensabile.
Le competenze necessarie per comprendere i contenuti di questa guida sono poche, e comprendono i rudimenti di CSS e CSS3, un po' di HTML, Javascript e jQuery. Di seguito è riportata una lista di riferimenti alle guide disponibili su HTML.it che forniscono le conoscenze preliminari richieste per la comprensione di questa guida:
Uno dei tool maggiormente utilizzati per testare velocemente l’utilizzo degli effetti prodotti da CSS è Codepen, che è a tutti gli effetti un ambiente di sviluppo “social” per web designer e sviluppatori. Per questo motivo può essere utile creare un account gratuito, registrandosi sul sito. Dopo la registrazione, sarà possibile creare facilmente progetti che integrino CSS, HTML e Javascript e immediatamente cominciare a sperimentare il risultato prodotto dall’esempio introduttivo fornito dal sito stesso.
Librerie per il motion design con CSS
Gran parte della guida illustrerà l’utilizzo di alcune librerie per il web motion design con CSS, ciascuna con un particolare tipo di scopo. Nella fattispecie, le librerie che saranno oggetto della guida sono le seguenti:
| Libreria | Descrizione |
|---|---|
| Animate.css | Una serie di piccole e leggere animazioni cross-browser. Indicata per enfatizzare piccoli elementi delle homepage e per gli slider. |
| Magic animations | Una delle prime librerie CSS per animazioni ad essere disponibile sul web. Molte animazioni sono uniche e la differenziano dalle rimanenti librerie. Le animazioni possono essere eseguite sia nativamente che tramite jQuery. |
| DynCSS | Questa libreria consente di rendere dinamici i tag CSS, facendoli precedere dalla sigla -dyn- (che sta per “dynamic”). I tag CSS vengono resi dinamici a seguito di eventi come lo “scrolling” o il “resizing” della pagina web. |
| CSShake | Apple ha reso comune l’utilizzo dello “scuotimento” degli elementi della UI (caselle di testo o dialogo), a seguito di un input errato da parte dell’utente. La libreria in oggetto fornisce una serie di animazioni atte a mimare lo “shake”. |
| Hover.CSS | Questa è una libreria per animazioni CSS molto popolare, che può essere utilizzata al meglio per animare piccoli elementi della pagina come bottoni, loghi, link, piuttosto che per implementare complesse animazioni. Alcune animazioni interessanti sono le “speech bubbles” e le “curls”. |