Vai al contenuto

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:

[javascript]
$("#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
});
[/javascript]

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.

[Download non trovato]

Sito autore: http://chriscoyier.net/
Demo: http://css-tricks.com/examples/Circulate/

Scritto da jqueryitalia

Sito WEB: https://www.jqueryitalia.org

Contenuto non disponibile.
Per visualizzarlo, devi acconsentire all'utilizzo dei cookies cliccando su "ACCONSENTO" nel banner sottostante.

Questo sito utilizza i cookies, anche di terze parti: se chiudi questo banner, scorri la pagina o continui con la navigazione, tu ACCONSENTI all'utilizzo dei cookies. MAGGIORI INFORMAZIONI

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi