Velocity.js è una piccola libreria javascript (solo 9k) che ridefinisce la funzione animate() di jQuery in modo da migliorare la fluidità dell’animazione e l’efficienza del browser, soprattutto nei dispositivi mobili.

Velocity può essere utilizzata però anche senza jQuery all’interno di istruzioni javascript.

velocity js

Velocity.js

Velocity è compatibile con tutti i browser web fino a Internet Explorer 8 e Android 2.3.

Usare velocity js

Scaricare una copia di velocity dal sito ufficiale e includerla subito dopo jQuery.

<script src="jquery-1.11.1.min.js"></script>
<script src="velocity.min.js"></script>

<script>
$(function(){

  // ...
  $(elementi).velocity({ // opzioni ... });
  
});
</script>

Ora rimpiazzare la funzione animate() di jQuery presente nei propri script con la funzione velocity() lasciando tutte le opzioni inalterate. Visualizzare la pagina per verificare l’incremento delle prestazioni, in particolare nei dispositivi mobili.

Velocity è compatibile anche con Zepto (per altre informazioni consultare il post Zepto: jquery in 9k).

Velocity js può essere utilizzata anche senza jQuery. In questo caso si può usare la funzione Velocity() indicando come argomenti:

  1. l’elemento a cui applicare l’animazione
  2. la proprietà css da modificare (è possibile indicare nel secondo argomento una serie di proprietà css da modificare)
  3. la durata

Nel seguente esempio le dimensioni del testo dell’elemento #e sono modificate con velocity.

<div id="e">Elemento da modificare </div>
<script src="js/velocity.min.js"></script>
<script>
  Velocity(document.getElementById("e"), { 'font-size': '150%' }, { duration: 1000 });
  Velocity(document.getElementById("e"), { 'font-size': '100%' }, { duration: 1500 });
  Velocity(document.getElementById("e"), { 'font-size': '200%' }, { duration: 2000 });
</script>

Velocity è rilasciata con licenza MIT (MIT License su wikipedia).

Altre informazioni sono disponibili nel sito ufficiale della libreria o nel repository di github.