Corsi on-line

5 nuove risorse per creare animazioni in CSS

L’evoluzione di CSS, e in particolare il supporto alle transizioni e alle animazioni fornito da CSS3, permette oggi di ottenere effetti grafici particolarmente articolati anche senza l’utilizzo di script JavaScript in genere particolarmente impegnativi dal punto di vista dei tempi di caricamento; nonostante ciò, in alcuni casi può essere ancora consigliabile optare per l’utilizzo combinato di CSS e soluzioni per lo scripting client side, come per esempio il framework jQuery.

animate-css

La breve selezione proposta in questo articolo non è basata esclusivamente su soluzioni realizzate in puro CSS, ma sul concetto che vede nell’interoperabilità tra diverse tecnologie un criterio per ottenere risultati ottimali; in ogni caso, per la stesura dell’elenco non sono state prese in considerazione alternative rilasciate sotto licenza closed o a pagamento (commerciali).

  1. Animate.css: disponibile sotto licenza Open Source e scaricabile da GitHub, si presenta come una libreria completa per l’applicazione di effetti di transizione a carico degli elementi di pagina; il sito Web Ufficiale permette di effettuare un’anteprima di tutte le animazioni realizzabili, dallo zoom alla rotazione, dal fading al bouncing.
  2. Effeckt.css: una raccolta veramente completa di effetti immediatamente applicabili grazie a codici pronti all’uso; si tratta di una soluzioni libera e gratuita per l’animazione di finestre modali, elenchi puntati e numerati, pulsanti, buttons, elementi per la navigazione, didascalie, campi form, tabs (schede) e tooltips.
  3. Rotation: un esempio completo e modificabile (con possibilità di visualizzare immediatamente l’anteprima) da utilizzare per applicare effetti rotazione ad uno o più elementi di pagina, l’utilizzatore ha a disposizione il markup HTML, le regole CSS e il sorgente JavaScript su cui lavorare per eventuali personalizzazioni.
  4. CSS3 Transition Effect: una risorsa simile a quella proposta in precedenza, anche in questo caso tutto il codice sorgente necessario per l’animazione è disponibile ed editabile direttamente tramite l’interfaccia di CodePen, in questo caso si tratta però di un effetto di transizione attivato su una divbox al passaggio del mouse.
  5. Animsition: presentato come un “simple and easy jQuery plugin for CSS animated page transitions“, ma mette a disposizione ben 58 effetti differenti tra cui fade, flip, zoom, e overlay. Tutte le animazioni sono compatibili con le ultime versioni dei browser più diffusi (nel caso di Internet Explorer dalla 10 in poi).

La selezione proposta non pretende di essere esauriente, le risorse disponibili in Rete per creare animazioni basate su CSS (ed eventualmente JavaScript) sono infatti numerosissime, anche limitandosi alle sole alternative Open Source.

Post correlati
I più letti del mese
Tematiche