Animazioni testuali e visualizzazione di oggetti a 360°
Sulla falsariga del precedente articolo, vediamo anche oggi alcuni plugins jQuery che permettono l’animazione di testo ed oggetti, sostituendo degnamente la tecnologia Flash all’interno dei nostri siti.
Cominciamo con Textillate.js che combina alcune librerie per fornire un plugin semplice e molto facile da utilizzare per l’applicazione di animazioni CSS3 a qualsiasi testo.
L’utilizzo di Textillate.js è effettivamente semplicissimo: basta includerlo, assieme a jQuery ed al potente Lettering.js (di cui abbiamo già parlato in questo articolo) per iniziare a creare effetti unici.
In realtà Textillate.js ha bisogno anche di Animate.css: un singolo file CSS che include varie regole per le animazioni come flash, bounce, shake…
Animate.css crea una classe per ogni animazione, classi che hanno l’accelerazione hardware nativa e lavorano quindi molto più agevolmente rispetto alle animazioni javascript.
Ma per i browser più vecchi c’è sempre bisogno del supporto javascript ed anche per questo (ma non solo per questo…) entra in gioco Textillate.js.
Abbiamo eseguito il plugin su tutti i maggiori browser attualmente disponibili (IE 9, Opera 12, Safari 5, Firefox 18 e Chrome) e, nonostante le animazioni siano sempre molto fluide, il plugin ha incontrato problemi su Opera ed IE .
Sito autore e demo: http://jschr.github.com/textillate/
Passiamo a parlare ora di tre plugin che permettono la visualizzazione di oggetti a 360°.
Il primo e più basilare si chiama ThreeSixty e consente la generazione di un’anteprima “trascinabile” a 360° da una sequenza di immagini. Il plugin supporta i comandi da tastiera (tasti freccia) ed il “touch and wipe” per i dispositivi mobile.
Inoltre i metodi nextFrame() e prevFrame() consentono di poter collegare controlli per un’interfaccia utente. Il plugin pesa solo 10 Kb.
Sito autore e demo: http://nick-jonas.github.com/threesixtyjs/
Il secondo plugin si chiama ThreeSixty Image Slider. Questo plugin, un pò più complesso del precedente, presenta ed offre un certo numero di opzioni di personalizzazioni tra le quali segnaliamo:
- il numero di frames totali per l’animazione
- il frame iniziale e quello finale
- il path e l’estensione delle immagini
- definizione /scelta del preloader da utilizzare
Inoltre è possibile definire dei controlli personalizzati e l’autore fornisce anche un editor live dove poter impostare le opzioni e vederne il risultato. Il plugin funziona perfettamente in tutti i più recenti browser e pesa solo 5 Kb in formato compresso.
Sito autore e demo: http://creativeaura.github.com/threesixty-slider/
L’ultimo ed il più versatile e complesso dei tre plugin per la visualizzazione di oggetti a 360° è Dopeless Rotate. Quest’ultimo infatti fornisce numerose funzionalità, tra le quali:
- hotspot configurabili
- funzione di zoom
- supporto dei dispositivi touchscreen
- possibilità di utilizzare più istanze del plugin su una sola pagina
- possibilità di utilizzare un qualsiasi numero di immagini
- caricamento delle immagini automatico o manuale tramite PHP senza script lato server
- un preloader che mostra l’avanzamento del caricamento delle immagini
- un preloader per il caricamento dell’immagine di zoom
Il plugin inoltre presenta un design moderno ed accattivante e pesa 19 Kb.
Dopeless Rotate è rilasciato sotto licenza Creative Commons Attribution-Noncommercial 3.0.
È quindi possibile utilizzarlo liberamente per progetti personali ma non commerciali, fornendo un collegamento visibile al sito dell’autore.
In caso si volesse utilizzare Dopeless Rotate per scopi commerciali è previsto il pagamento di una licenza d’uso.
Sito autore e demo: http://www.dopeless-design.de/dopeless-rotate-jquery-plugin-360-degrees-product-viewer.html
DOWNLOAD
