Con Velocity aggiungi brio al tuo sito web

cover
Tempo stimato di lettura: 3 minuti, 42 secondi
Pubblicato il 6 ottobre 2015

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:

  1. transizioni css
  2. jQuery
  3. 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,

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

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.

Utilizza quindi le stesse opzioni impiegate nella prima chiamata con ulteriori nuove opzioni.

#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:

#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.

Anzichè passare un numero è possibile passare la sintassi true.

In Velocity, semplicemente impostiamo il loop con un numero che desideriamo.

#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”.

#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.

#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.

Vedi la DEMO

  • patrick

    Grazie!

    Da studiare per bene

Shares