Flash? No, grazie: meglio jQuery!

Parliamo oggi di alcuni plugins che permettono l’animazione di testo e oggetti.

Per primo parliamo di Box2d, un semplice plugin jQuery che trasforma gli elementi del DOM in veri e propri oggetti fisici nel “mondo” bidimensionale del browser.
Creato da Franz Enzenhofer (che con Fullstackoptimization è stato Sponsor Ufficiale della jQuery Europe Conference 2012 di Vienna), il plugin utilizza l’ottimo motore fisico box2web.

Per inizializzare il nuovo “mondo” è sufficiente eseguire la seguente istruzione:

$("#some_element").box2d({'y-velocity':10});

Tutte le istruzioni successive a questa aggiungeranno solo elementi al “mondo”.

La chiamata .box2d() può essere impostata con le seguenti opzioni:

• ‘y-velocity’: velocità di caduta verticale, default 0
• ‘x-velocity’: velocità orizzontale, default 0
• ‘debug’
• ‘static’: oggetti fissi (true) o in movimento (false)
• ‘density’: peso (in relazione alla dimensione). Valori tra 0 ed n, default 1.5
• ‘restitution’: rimbalzo.Valori tra 0 ed 1, default 0.4
• ‘friction’: attrito.Valori tra 0 ed 1, default 0.3
• ‘shape’: forma. Valori “box” o “circle”, default box

Una cosa molto importante da prendere in considerazione quando si inizializzano gli elementi da utilizzare è che questi devono avere larghezza e lunghezza SEMPRE DEFINITE per evitare strani comportamenti: pensate ad esempio agli H1, che prendono di default l’intera larghezza della pagina.

E’ possibile definire forma, densità, rimbalzo ed attrito per ogni elemento del DOM:

<div box2d-static='true' style="widht:200px; height:200px;"> </div>
<div box2d-shape='circle' style="widht:200px; height:200px;"> </div>
<div box2d-density="1.5" box2d-restitution="0.4" box2d-friction="0.3" style="widht:200px; height:200px;"> </div>

Queste sono solo i valori di creazione degli oggetti, ed il cambiamento successivo di tali attributi (ad esempio tramite jQuery) non ha (al momento) alcun effetto.

Un semplice esempio dell’utilizzo del plugin lo trovate qui:
http://www.fullstackoptimization.com/box2d-jquery/

Il plugin è disponibile per il download su Github al seguente indirizzo:
https://github.com/franzenzenhofer/box2d-jquery.

Il secondo plugin jQuery di cui parliamo oggi è invece animateText.js di Justin Lucas, con il quale è possibile creare facilmente animazioni di testo, anche di un certo impatto visivo. Il plugin viene fornito con un paio di animazioni predefinite, che è comunque possibile personalizzare.

E’ sufficiente creare una lista non ordinata (<ul>) con almeno un elemento nella lista (<li>) contenente il testo e chiamare .animateText() su un selettore della lista non ordinata. Il primo parametro di .animateText () è sempre necessario e, nel caso di più elementi nella lista bisognerà passare una matrice di oggetti di testo che rappresentano le voci di elenco.

.animatedText() accetta 3 parametri: textObjects, options ed animations.
L’unico parametro obbligario è textObjects.

Ecco una breve panoramica delle parti che compongono textAnimate.js:

textObjects: rappresenta un singolo blocco di testo, contenuto all’interno di un <li>, che viene animato nel suo complesso. Ogni textObjects ha 3 parametri principali (animazione, offset, durata) che determinano l’animazione da utilizzare, quando questa deve iniziare e per quanto tempo dovrebbe durare. Una collezione di textObjects costituiscono una textGroup.

animations: una animazione contiene le istruzioni su come spostare e trasformare un textObjects. Queste istruzioni sono costituiti da uno o più “posizioni” che descrivono lo stato del textObjects.

positions: una posizione descrive lo stato cun cui  il textObjects sarà animato. Ogni animazione contiene uno o più posizioni. La prima posizione è il punto di partenza per il textObjects che inizierà immediatamente l’animazione verso lo stato descritto nella posizione successiva.

Esempi e download sono disponibili all’indirizzo
http://lukeas14.github.com/animateText.js/