Quante volte hai pensato che il tuo sito web fosse un po’ statico e hai sentito l’esigenza di aggiungere animazioni e brio?
Per raggiungere questo obiettivo ci sono 3 soluzioni principali:
- transizioni css
- jQuery
- Velocity.
Sicuramente avrai provato le prime due opzioni, meno probabile, invece, che tu abbia utilizzato Velocity.js.
La domanda sorge spontanea: ma Velocity.js nn è una libreria jQquery? La risposta è che inizialmente funzionava con jQuery, infatti si chiamava jquery.velocity.js. Da qualche tempo può lavorare anche autonomamente con una propria libreria e infatti si chiama Velocity.js.
Cos’è velocity.js?
Velocity.js è un plug-in jquery realizzato da Julian Shapiro che ha re-implementato la funzione di “jQuery $.animate ( )” per produrre performance molto più elevate anche delle stesse transizioni css. In 7kb (zippate) include tutte le funzionalità di $.animate ( ) come trasformazione, animazione, looping e scrolling.
Velocity è quindi considerato il leader nella performance dell’animazione DOM grazie a diversi motivi e in particolare a questi 3:
- usa un codice pulito riuscendo a utilizzare parametri di animazioni addizionali rispetto a jQuery;
- utilizza la funzione “reverse” che permette di animare la funzione precedente senza dover ripetere la sintassi, così non c’è bisogno di ripetere gli stessi valori nel foglio di stile;
- utilizza una caratteristica unica, la “sequenza” per le macro animazioni, permettendoti di realizzare diverse animazioni su più elementi della pagina con numerosi benefici.
Nell’articolo di Css-trick “Improving UI Animation Workflow with Velocity.js” è spiegato nei dettagli perché Velocity è il plug-in migliore da utilizzare nelle transizioni. Vi consiglio di leggerlo attentamente.
Velocity è compatibile con qualsiasi browser, anche con IE8 e Android 2.3.
SINTASSI
Velocity può lavorare sia con la sintassi di un singolo argomento, semplicemente facendo passare in un singolo oggetto sia la proprietà che l’opzione,
$element.velocity({
properties: { opacity: 1 },
options: { duration: 500 }
});
sia con una sequenza di sintassi separata da una virgola, ma solo per la durata, e le proprietà di “easing” e “complete” poste in qualsiasi ordine
$element.velocity({ top: 50 }, 1000);
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });
PRINCIPALI OPZIONI E CARATTERISTICHE
Velocity supporta varie opzioni.
#1 – REVERSING
La funzione di reversing, oltre che a risparmiare codice, permette di eseguire la funzione precedente con delle variazioni.
$div .velocity({ opacity: 1, top: "50%" })
.velocity("reverse");
Utilizza quindi le stesse opzioni impiegate nella prima chiamata con ulteriori nuove opzioni.
$div .velocity({ opacity: 1, top: "50%" }, 1000)
.velocity("reverse",500);
#2 – SCROLLING
Una tecnica di web design molto utilizzata è quella di far scorrere il browser in modo da allinearlo con ogni elemento fin sotto alla pagina, animando gli elementi. Con velocity questo è fatto in maniera molto più semplice rispetto a jQuery, perché non è necessario utilizzare i tag body e html per renderlo efficace anche in IE. È infatti sufficiente questa sintassi:
$div .velocity("scroll", 1000) .velocity({ opacity: 1 });
#3 LOOPING
L’opzione in Loop ti permette di animare l’elemento un determinato numero di volte. Per esempio, quando vogliamo catturare l’attenzione dell’utente con notifiche o quando l’inserimento di un campo input è invalido e vogliamo aggiungere un effetto di vibrazione per attirare la sua attenzione.
$element.velocity({ height: "10em" }, { loop: 2 });
Above, if the element's original height was 5em, its height will alternate between 5em and 10em two times.
Anzichè passare un numero è possibile passare la sintassi true.
$element.velocity({ height: "10em" }, { loop: true });
In Velocity, semplicemente impostiamo il loop con un numero che desideriamo.
$div.velocity( { top: -100 },
{ loop: 5 });
#4 – FADING
Se vogliamo utilizzare l’opzione di fading, che consiste nel visualizzare gradatamente un elemento che non era visibile inizialmente con Velocity, è possibile passare display come un’opzione che accetta gli stessi valori che usiamo nel foglio di stile css: “block”, “inline”, e “none”.
$div.velocity( { opacity: 0, top: "-50%" }, { display: "none" });
#5 – DELAYING
La funzione delay ti permette di ritardare l’inizio di un’animazione e può essere usata anche nel loop per creare una pausa tra i vari loops. È espressa in millesimi di secondo.
$element.velocity({
height: "+=10em"
}, {
loop: 4,
/* Wait 100ms before alternating back. */
delay: 100
});
#6 – SEQUENZE
Le sequenze sono una caratteristica unica di Velocity che jQuery non ha e può essere utilizzata quando dobbiamo inserire più animazioni in una stessa pagina su diversi elementi, con il vantaggio di una migliore organizzazione del codice.
Inoltre, può essere applicata anche alla funzione hover di un elemento. Nell’esempio da me creato nella demo ho inserito delle sequenze di animazione per creare diverse transizioni nella pagina.
CONCLUSIONE
È chiaro che in base al livello di conoscenza di jQuery è possibile raggiungere risultati straordinari, ma anche senza essere un guru di jquery puoi facilmente ottenere degli effetti accattivanti. Con un po’ di esercizio puoi aggiungere un animazione e brio al testo, alle immagini o ai contenitori del tuo sito web.
Consulta la documentazione scritta dallo sviluppatore Shapiro oppure la Demo Gallery di Velocity per avere un’idea di quello che puoi realizzare con questo plug-in.
