Animaciones web mejoradas con VelocityJS
Las animaciones, cuando se aplican cuidadosa y correctamente, pueden mejorar mucho el aspecto de la web así como la experiencia de usuario que la visita. En este artículo, vamos a darle un vistazo a las animaciones web con VelocityJS. Se trata de un popular motor de animación Javascrit que consigue un rendimiento muy rápido y mejorado respecto a las animaciones hechas con JQuery, sobretodo en dispositivos móviles.
Una de las otras ventajas de VelocityJS es que su sintaxis es muy parecida a la de JQuery, así que si ya estás un poco familiarizado con esta librería no te va a costar aprender. Vamos a ver como preparar el entorno y algunos ejemplos básicos para empezar con esta magnifica librería.
Preparando el entorno con VelocityJs
Lo primero que haremos será crear un documento html e incluir los archivos Javascript necesarios. Esto se hace mediante la etiqueta script. Podemos elegir entre alojar los archivos en nuestro proyecto o mediante el uso de un CDN. Usando CDN’s sería de la siguente forma:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <script src="js/script.js"></script> </head> <body> </body> </html>
Fijaos que he añadido la librería JQuery para que me ayude con la selección de elementos pero VelocityJs no requiere de dicha librería para funcionar. También he añadido un script.js para controlar y hacer las llamadas a la librería.
Preparando el script
Tenemos que esperar a que se cargue la página antes de que podamos ejecutar las animaciones. El siguiente código de jQuery lo hará por nosotros. Se espera que los elementos DOM se carguen antes de ejecutar el código dentro de la función. En este caso, el código imprimirá «Estoy listo!» dentro de la consola. Este código lo pondremos en nuestro archivo script.js:
$( document ).ready(function() {
console.log( "Estoy listo!" );
});
A partir de ahora nuestro código lo pondremos dentro de la función ready
Animaciones básicas con VelocityJs
Con el siguiente código moveríamos un div con clase box 600 píxeles hacia la derecha en medio segundo:
$(".box").velocity({
left: "600px",
}, {
duration: 500,
});
See the Pen Animación básica con Velocity.js by Albert Sarda (@albertsarda) on CodePen.
Animando propiedades CSS
VelocityJS accepta un buen numero de propiedades CSS para manipular los elementos. Podemos usar estas propiedades juntas en una sola instancia para realizar sofisticadas animaciones. Por ejemplo, aquí vemos un cambio de propiedades CSS en el elemento con clase box durante 250 mili segundos con una función de aceleración easeInQuad
$('.box').velocity({
borderRadius: "100px",
width: "100px",
height: "100px",
backgroundColor: "#8CC152",
borderColor: "#8CC152",
translateX: '-10px'
}, {
duration: 250,
easing: "easeInQuad"
});
See the Pen Animación con propiedades VelocityJs by Albert Sarda (@albertsarda) on CodePen.
Fijaros que las propiedades que son compuestas de dos palabras se tienen que aplicar en formato camelCase, siguiendo la convención de nomenclatura de Javascript. Por ejemplo, la propiedad border-radius se aplica como borderRadius.
Scroll
VelocityJs pone a disposición un atajo llamado scroll my útil para crear links de destino a una sección de la página. El siguiente codigo dirigiría hasta el