La interactividad de un sitio web, es un factor importante al momento de fidelizar nuevos visitantes. Como sabemos, el concepto de web estático fue acabado. La animación en la web, ha sido una característica bastante aprovechada para hacer un sitio web mucho mas llamativo para el usuario.
Aunque la animación es una característica que puede ser bien aprovechada, encontramos que muchas veces, el rendimiento puede ser un factor importante para decidir si se usa o no se usa la animación en un sitio web. En el presente articulo, compartiré como usar Velocity.js, un útil plugin de jQuery, capaz de mejorar el rendimiento de las animaciones en nuestro sitio web.
Uso General Paquete Interfaz De Usuario
Después de descargar e incluir el paquete de interfaz de usuario (sólo 1,8 KB) en la página, podrás acceder a los efectos que puedes usar cono este plugin, los efectos se dividen en dos categorías:
CallOuts Ó Llamadas
Llamadas son efectos que llaman la atención sobre un elemento con el fin de aumentar la experiencia del usuario, como el temblor de un elemento para indicar un error de entrada, mostrando un elemento para indicar que algo ha cambiado en la página, o rebotar un elemento para indicar que un mensaje de espera el usuario.
See the Pen CallOuts Con VelocityJs by julian andres gonzalez (@belial9826) on CodePen.
Transiciones
Las transiciones son efectos que hacen que un elemento aparezca dentro ó fuera del margen de la vision. Cada transición se asocia tanto con un «in» u «out». El valor de las transiciones es en revelar y ocultar el contenido de una forma que es visualmente más elegante, en lugar de simplemente animar la opacidad de un elemento. Aquí está slideUpIn, una transición que incorpora un efecto sutil de diapositivas:
See the Pen HEbDq by julian andres gonzalez (@belial9826) on CodePen.
Si has prestado atención a la evolución la interfaz de usuario de iOS (Distintos efectos de movimiento para hacer mas placentero el uso de las aplicaciones) son agradables para la usabilildad del usuario. Esta diversidad de transiciones es lo que el paquete de Velocity.js trae para hacer mas agradable los sitios web.
Ten en cuenta que VelocitiyJs, ha sido optimizado de tal manera, que podrás usarlo en cualquier escala de proyecto (Pequeño, mediano y grande). A continuación, unos ejemplos de como se podrían usar tales efectos.
Usando El Paquete De Velocity.js
El uso de este plugin es bastante simple, solo tenemos que seguir la siguiente sintaxis:
1 | $elemento.velocity("callout.shake"); |
Al igual que con las llamadas normales de Velocity.js, lo efectos pueden ser encadenados como cualquier codigo de jQuery:
1 2 3 4 | / * Llamar al efecto batido con una duración de 2000 ms, a continuación, deslice los elementos fuera de la vista. * / $elements .velocity("callout.shake", 2000) .velocity("transition.slideDownOut"); |
Los efectos del paquete de la interfaz de usuario, opcionalmente toman tres opciones únicas: stagger, drag y backwards.
Efecto Stagger Ó Escalonado
El tiempo en este efecto, se especifica el retraso en mili segundos seguidamente de la animación de cada elemento. Con esto ultimo, nos aseguramos de crear un efecto sincronizado, lo que dará un toque de elegancia 😉
1 2 | / * Animar elementos lapsos intermitentes de 250ms. * /
$divs.velocity("transition.slideLeftIn", { stagger: 250 }); |
See the Pen FfLJt by julian andres gonzalez (@belial9826) on CodePen.
Efecto Drag Ó Arrastrar
En este efecto, se establece el drag con el valor de true para incrementar sucesivamente la duración de la animación de cada elemento. El último elemento se animará con una duración igual al valor original, mientras que los elementos anteriores al último tendrán sus valores de duración se va acercando al valor original. El resultado, sera un efecto con un toque sutil de animación.
See the Pen lkGom by julian andres gonzalez (@belial9826) on CodePen.
Efecto De Backwards Ó Retroceso
Establezca en true a backwards para animar empezando por el último elemento. Esta opción es ideal para un efecto donde las transiciones de los elementos estén fuera de la vista.
See the Pen HEbDq by julian andres gonzalez (@belial9826) on CodePen.
Beneficios De La Animación Basada En JavaScript
Antes de continuar, es preciso dejar claro, que el rendimiento de una animación pura en JavaScript es mucho mas ligera que las animaciones dadas con las librerías que se usan con CSS, tal es el caso de Animate.CSS.
1. Debido a que los efectos del paquete de interfaz de usuario se comportan de forma idéntica a las llamadas de animación estándar en Velocity.js, pueden ser encadenados y tomar opciones. (Hacer esto con CSS puede ser engorroso.)
2. Los efectos han sido optimizados para el rendimiento (mínima interacción del DOM). Los elementos animados a través del paquete de interfaz de usuario cambian automáticamente el valor del display a none después de la transición, y de nuevo a display: block o line (Hacer esto a través de CSS requiere de múltiples llamadas y código desordenado.)
3. Velocity.js no deja su texto borroso. Si ha aplicado efectos de transición a través de CSS antes, entonces sabrá que el texto puede verse borroso cuando termina la animación y no ha quitado la clase asociada. Esto no sucede en Velocity.js porque su motor subyacente borra por completo los efectos de transformación que no sean necesarios al terminar una animación.
Con estos beneficios, entre ellos un gran rendimiento de los efectos «en todos los navegadores y dispositivos (incluyendo los dispositivos móviles mas antiguos), ya no tienes excusa para no empezar a experimentar con el diseño de movimiento en tus proyectos web 😉
