Animaciones web mejoradas con VelocityJS

VelocityJS

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.

VelocityJS

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

de nuestra página

 $('footer').velocity("scroll", { 
    duration: 2000,
    easing: "easeInBack"
  });

Reverse

Otro atajo muy útil es reverse. Este nos permite revertir al estado inicial del elemento cuando la animación se ha completado. Este código estaría aplicado a un elemento con clase .btn, una traslación vertical de 15 píxeles y encadenando le otra instancia. Pasando-le "reverse" revertiría el estado inicial. Con el parámetro loop le indicamos que se siga repitiendo.

$(".btn").velocity({
  translateY: "15px"
}, {
  duration:200,
  loop: true
}).velocity("reverse");

Aquí podéis ver un ejemplo con Scroll y Reverse:

See the Pen Scroll/Reverse con velocityJS by Albert Sarda (@albertsarda) on CodePen.

Plugin: UI Pack

VelocityJS pone a nuestra disposición más efectos de animación gracias al plugin UI Pack. Una vez incluido en nuestra pagina tendréis acceso a un gran numero de opciones con un gran potencial para construir interficies muy vivas. Este plugin nos permitirá crear secuencias de animaciones.

VelocityJS es una muy buena alternativa a las animaciones jQquery y CSS cuando estamos construiendo interficies interactivas que implican múltiples animaciones. És facil de usar, pesa muy poco y es muy rápido. Hemos hecho unos pequeños y básicos ejemplos pero podéis obtener más información en su página oficial

Saludos!

Escribe un comentario