"El diseño es el embajador silencioso de tu marca"
- Paul Brand

VelocityJS

VelocityJS es un motor de animaciones hecho con javascript facil de usar y con un rendimiento excelente.
Lo primero os dejo el enlace a su página oficial donde esta toda la documentación.
De hecho es tan bueno que en lo que a animaciones se refiere esta por encima de las que proporciona jQuery o el propio lenguaje CSS, destacando sobretodo en los entornos móviles.

En el año 2015 se llevo a debate la posibilidad de reemplazar el núcleo de las animaciones de jQuery con VelocityJS, en el debate participaron nada menos que algunos de los desarrolladores de jQuery como Timmy Willison y el creador de VelocityJS Julian Shapiro.

Una de sus ventajas es que no consulta tanto el arbol DOM de nuestra página como jQuery, lo que en terminos de velocidad la hace superior y si comparamos ambas notaremos tambien una mayor fluidez.

Voy a demostrarlo, aqui abajo teneis la misma animación con las dos librerías.

Con jquery se comporta así…

Con velocity se comporta así…

 

La diferencia visual es bastante evidente…

Si por contra buscamos hacer las animaciones usando CSS3 la ventaja que tendrá no es tanto el rendimiendo sino la compatibilidad pues funciona en todos los navegadores hasta IE8 y Android 2.3.

Tras gzipear la librería puedo deciros que el impacto en la carga es insignificante pues el peso esta en torno a 10kb.

Como se usa?

La manera de escribir nuestro código con VelocityJS es muy parecida a la de jQuery, lo cual es una ventaja porque a muchos se les hara familiar y la curva de apredizaje será mínima, veamos el código empleado arriba para realizar ambas animaciones.

En la de jQuery se llamó de esta manera.

$("#jquery-example").animate({
    "left": "90%",
    "height": "50px",
    "width": "50px"
},{
    "duration": 5000
});

Mientras que para VelocityJS usamos este código.

$("#jquery-example").velocity({
    "left": "90%",
    "height": "50px",
    "width": "50px"
},{
    "duration": 5000
});

Aunque esto es solo un ejemplo, y no quiere decir que siempre vaya a ser igual nos sirve para darnos cuenta de lo parecido que es, no tenemos excusa para no trastear un poco con esta gran librería.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)