{"id":5733,"date":"2016-09-30T19:30:48","date_gmt":"2016-09-30T18:30:48","guid":{"rendered":"http:\/\/www.espai.es\/blog\/?p=5733"},"modified":"2021-09-14T17:50:48","modified_gmt":"2021-09-14T15:50:48","slug":"animaciones-web-con-velocityjs","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2016\/09\/animaciones-web-con-velocityjs\/","title":{"rendered":"Animaciones web mejoradas con VelocityJS"},"content":{"rendered":"

Las animaciones, cuando se aplican cuidadosa y correctamente, pueden mejorar mucho el aspecto de la web as\u00ed como la experiencia de usuario que la visita. En este art\u00edculo, vamos a darle un vistazo a las animaciones web con VelocityJS<\/strong>. Se trata de un popular motor de animaci\u00f3n Javascrit <\/em>que consigue un rendimiento muy r\u00e1pido y mejorado respecto a las animaciones hechas con JQuery<\/em>, sobretodo en dispositivos m\u00f3viles.<\/p>\n

Una de las otras ventajas de VelocityJS <\/strong>es que su sintaxis es muy parecida a la de JQuery, as\u00ed que si ya est\u00e1s un poco familiarizado con esta librer\u00eda no te va a costar aprender. Vamos a ver como preparar el entorno y algunos ejemplos b\u00e1sicos para empezar con esta magnifica librer\u00eda.<\/p>\n

\"VelocityJS\"<\/a><\/p>\n

Preparando el entorno con VelocityJs<\/strong><\/h2>\n

Lo primero que haremos ser\u00e1 crear un documento html e incluir los archivos Javascript necesarios. Esto se hace mediante la etiqueta script<\/code>. Podemos elegir entre alojar los archivos en nuestro proyecto o mediante el uso de un CDN. Usando CDN’s ser\u00eda de la siguente forma:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang="en">\r\n<head>\r\n\t<meta charset="UTF-8">\r\n\t<title>Document<\/title>\r\n\t<script src="http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js"><\/script>\r\n\t<script src="http:\/\/cdnjs.cloudflare.com\/ajax\/libs\/velocity\/1.2.3\/velocity.min.js"><\/script>\r\n\t<script src="js\/script.js"><\/script>\r\n<\/head>\r\n<body>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Fijaos que he a\u00f1adido la librer\u00eda JQuery<\/em> para que me ayude con la selecci\u00f3n de elementos pero VelocityJs<\/strong> no requiere de dicha librer\u00eda para funcionar. Tambi\u00e9n he a\u00f1adido un script.js<\/code> para controlar y hacer las llamadas a la librer\u00eda.<\/p>\n
Preparando el script<\/h2>\n
Tenemos que esperar a que se cargue la p\u00e1gina antes de que podamos ejecutar las animaciones. El siguiente c\u00f3digo de jQuery<\/em> lo har\u00e1 por nosotros. Se espera que los elementos DOM se carguen antes de ejecutar el c\u00f3digo dentro de la funci\u00f3n. En este caso, el c\u00f3digo imprimir\u00e1 \u00abEstoy listo!\u00bb dentro de la consola. Este c\u00f3digo lo pondremos en nuestro archivo script.js:<\/em><\/p>\n
\r\n$( document ).ready(function() {\r\n    console.log( "Estoy listo!" );\r\n});\r\n<\/pre>\n
A partir de ahora nuestro c\u00f3digo lo pondremos dentro de la funci\u00f3n ready<\/em><\/p>\n
Animaciones b\u00e1sicas con VelocityJs<\/strong><\/h2>\n
Con el siguiente c\u00f3digo mover\u00edamos un div con clase box<\/code> 600 p\u00edxeles hacia la derecha en medio segundo:<\/p>\n
\r\n$(".box").velocity({\r\n  left: "600px",\r\n}, {\r\n  duration: 500,\r\n});\r\n<\/pre>\n
 <\/p>\n
See the Pen Animaci\u00f3n b\u00e1sica con Velocity.js<\/a> by Albert Sarda (@albertsarda<\/a>) on CodePen<\/a>.<\/p>\n