Una nueva forma de animaciones para la web o aplicación móvil
Bueno, bueno, hola 2021. ¡Ya estamos aquí! Hemos llegado.
Al ser el primer post de este 2021 aprovecho para desearte lo mejor para este año nuevo aunque como he dicho hasta la saciedad a todos los que están a mi alrededor: ¡ojo con las expectativas del 2021!
Comienzamos este año con este post que estoy seguro que te va ayudar a conocer una nueva miniárea dentro de las tecnología web o el diseño de páginas web.
Todo se remonta a hace unas semanas cuando estaba actualizando una web de un cliente diseñada con Elementor Pro.
Viendo las nuevas funcionalidad que tiene la herramienta hay una nuevo bloque llamado Lottie.
¿Y qué es un Lottie?
Como soy un auténtico cotilla – tecnológicamente hablando – me pongo a investigar y cual es mi sorpresa cuando descubro que son similares a los gifs pero en su versión moderna.
*Seguro que algún programador me dice que estoy loco y que no tienen nada que ver. Cierto, pero para que nos entendamos el resto de los mortales es así*
Desde un punto de vista técnico, un lottie animation no deja de ser un formato similar a gif aunque escrito por código.
Esto permite modificar un montón de aspectos de la animación.
En el caso de Elementor Pro, puedes modificar la opción bucle, tamaño e incluso fondos.
Sin embargo, se pueden modificar muchas variables más como opciones concretas de la animación. E incluso, puedes vincular opciones como cambiar la velocidad de la animación según el porcentaje de scroll de tu página web.
Son multitud las posibilidades que puedes modificar.
*Es más, hay cientos. Como en mi caso no soy experto puedo modificar cuatro variables sencillas*
Una biblioteca como fuente de inspiración
Ahora llega en ese momento en el que dices, genial Cristian: ¿y de dónde saco ejemplos que pueda usar o entender para aprender yo un poco del tema?
Pues bien, tienes la biblioteca llamada LottieFiles.
*Es una biblioteca que poco a poco está ganando fuerza y se ha convertido en el referente principal de este tipo de archivos.
Archivos Lotties: lo que debes saber
Un archivo lottie está compuesto por lo que se conoce como un archivo json. Esto significa que, si tienes conocimientos en este tipo de archivos, puedes modificar tanto su aspecto como sus variables.
Para que te sea más sencilla todas estas tareas, tienes varias herramientas en LottieFiles que permiten varias cosas.
La que más me gusta personalmente, es poder modificar el json en el Json Editor.
En el editor, puedes cargar cualquiera de los Lotties alojados dentro de la página web para jugar con ellos.
Aspectos técnicos de un lotties en una web
Voy a cerrar este post por el principio, es decir, en el punto en el que hablaba de que estaba modificando una web.
Los lotties a nivel de tiempos de carga son mucho más rápidos que la multitud de los archivos gifs. (Ya ni comentar los archivos en formato vídeo)
Permite tiempos de carga de una página web menores aunque este aspectos hay que valorarlo en cada proyecto ya que para poder mostrar un lottie en una web, necesitamos del correspondiente plugin para cargar las APIs de esta funcionalidad.
También tiene la ventaja, como ocurre con las imágenes de que con enlazar desde la url que aloja el archivo ya se muestra en tu web.
He investigado para analizar si este tipo de prácticas están penalizadas por Google a nivel de posicionamiento, sin embargo, no tengo constancia de ello.
*En el caso de las imágenes sí ocurre esto*
Espero que esta novedad dentro del diseño web te guste. Nos vemos pronto con más innovaciones.
