Animazione circolare
Chris Coyier presenta un plugin per jQuery 1.4 per effettuare animazioni circolari: Circulate.
E’ necessaria la versione 1.4 di jQuery in quanto viene utilizzato il nuovo metodo .animate().
Ciò consente di effettuare animazioni diverse su assi diversi, grazie anche al plugin Easing.
L’idea di base è riassunta nella seguente immagine:
Quindi, se eseguiamo in quattro momenti diversi, lanciando le funzioni di easing e, se necessario, aggiungendo o sottraendo possiamo ottenere un cerchio.
E non solo sarà possibile ottenere un cerchi, ma ogni ellisse definito da una altezza e una larghezza.
Caratteristiche
È possibile, come ovvio, dichiarare la velocità, l’altezza e larghezza.
Ci sono però altri tre parametri configurabili:
- SizeAdjustment: un adeguamento percentuale. Il valore predefinito è 100 (rimane lo stesso). Un valore inferiore a 100 restringe a tale percentuale il punto di mezzo, mentre un valore superiore a 100 fa aumentare a tale percentuale il punto di mezzo;
- Loop: valore predefinito è false. True significa che il ciclo verrà eseguito in modo ricorsivo. È possibile interrompere un loop di corrente chiamando il plugin su tale elemento, cioè $(“#elemento”).circulate(“stop”);
- ZIndexValue: accetta un array di quattro valori numerici. Questi valori impostano la proprietà CSS z-index in ciascuno dei quattro punti di animazione.
Ecco il set completo:
$("#elemento).circulate({
speed: 400, // Velocità di ciascun quarto di segmento di animazione 1000 = 1 secondo
height: 200, // Distanza verticale del percorso
width: 200, // Distanza orizzontale del percorso
sizeAdjustment: 100, // Percentuale di restingimento e/o allungamento
loop: false, // Animazione continua
zIndexValues: [1, 1, 1, 1], // Valori z-index per ciascuno dei quattro punti di animazione
});
Il plugin è ancora in fase di beta in quanto non funziona molto bene su Opera ed anche perché l’autore vorrebbe apportare alcune modifiche (per esempio un parametro di callback) e scrivere in maniera più efficiente il plugin stesso.
Sito autore: http://chriscoyier.net/
Demo: http://css-tricks.com/examples/Circulate/
Segnala Errore
RSS Feed
Iscriviti per ricevere le ultime news
Social Network
Seguici su Meetups
Sostieni jQuery Italia
Commenti
Tags
WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.
I Più Scaricati
- gMap ver. 1.0.4 (327 volte)
- Easy Accordion ver. 0.1 (261 volte)
- TinyTips ver. 1.1 (251 volte)
- jQueryUI 1.8 rc1 ver. 1.8 rc1 (235 volte)
- jQuery Digital Clock ver. 2.1.0 (224 volte)
- Form Wizard ver. 2.0.1 (214 volte)
- jQuery File Upload ver. 1.0.0 (209 volte)

Categoria: 





