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/
Popolarità: 9%
