Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Animation

Mejor presentación de datos para infografías: Ejemplos prácticos de animación

by
Read Time:5 minsLanguages:

Spanish (Español) translation by Patarca (you can also view the original English article)

El movimiento y la animación, cuando se realizan correctamente, pueden hacer que su sitio web sea más atractivo. Los sitios web que utilizan la presentación de datos y la infografía son el ejemplo perfecto. Usando el Framework de animación que creamos anteriormente, en este tutorial aprenderás a animar tres ejemplos infográficos: contadores de datos, barras de progreso y barras de progreso circulares.

Antes de empezar

Recomendamos fuertemente que lea el tutorial anterior antes de comenzar, solo para familiarizarse con los conceptos y las funciones principales de JavaScript que estamos usando.

Además del framework, necesitaremos un par de complementos de JavaScript y Fontawesome:

En los archivos de ejercicios ya fueron incluidos estos complementos combinados en el archivo controller.js.

Animando datos e infografías

Las infografías por sí mismas no están animadas, son formas estáticas de presentar datos. Vamos a tomar una página web estática de infografía y agregaremos un poco de animación. Del artículo anterior, habrás aprendido que nuestras animaciones suceden cuando son ejecutadas por un evento. En nuestro ejemplo, usaremos el evento de desplazamiento de la página web, por lo que animaremos nuestras diversas piezas de infografía en el desplazamiento de la página una vez que ingresen a la ventana de visualización.

Contadores animados

Primero comenzaremos con los contadores de datos. Aquí están, a mitad de la animación:

data countersdata countersdata counters

Desplácese hacia abajo en la página de demostración para verlos en acción. Abra el archivo controller.js y busque en la sección INFOGRAPHICS (línea 151). Verás el siguiente código:

Usando waypoints podemos detectar cuándo cada contador ingresa a la ventana gráfica y ejecutar el conteo de datos en ese momento. Abra el archivo index.html y busque el elemento con la clase et-counter. Tiene un atributo data-to importante y requerido, este es el número al que debemos contar desde 0. Ponga aquí el valor entero que desee. Y si desea animar más de un contador, simplemente haga copias y cambie el valor de data-to. Se animarán con la misma duración. Una vez que el contador ingrese a la ventana gráfica, agregaremos una clase active y ejecutaremos la llamada del complemento.

Con el elemento de contador puede usar íconos de Fontawesome y número de postfix, como 1000k o 10b. También puede modificar esto para usar un prefijo como $1000.

Para hacer que la animación sea más atractiva, combino la animación de columnas con la animación de contadores.

Barra de progreso animada

El siguiente elemento es nuestra barra de progreso. Este elemento es útil para la animación de datos basados ​​en porcentajes. Abra el archivo index.html y busque el elemento con la clase et-progress. Contiene un div con clase bar; te darás cuenta de que tiene un atributo data-percentage. Ingrese cualquier valor entero de 0-100, luego abra el archivo controller.js y encuentre el código:

Como puede ver en el código, primero nos aseguramos de que la barra de progreso esté en la ventana gráfica con el complemento de waypoints. Luego, animamos el ancho de la barra div desde 0 hasta el valor de porcentaje ingresado y también animamos el número de porcentaje usando el complemento countTo con el que ya está familiarizado en el ejemplo anterior. Aquí también puede modificar la barra de progreso para que tenga un atributo de datos de color dinámico (yo hice colores predefinidos). Y nuevamente, para hacer la presentación más atractiva, combiné la animación de la barra de progreso con la animación de columnas.

Barra de progreso circular animada

Nuestro último ejemplo es una barra de progreso circular. La lógica detrás de este elemento es muy similar a un elemento de barra de progreso regular, pero el estilo es diferente.

Circular ProgressCircular ProgressCircular Progress

Nuevamente, al usar waypoints, debemos asegurarnos de que la barra de progreso del círculo esté en la ventana gráfica. Después de eso, llamaremos dos complementos: el easyPieChart y el countTo de nuestro primer ejemplo.

Abra el index.html y encuentre el elemento con la clase et-circle-progress. Verás que tiene los atributos de data-percentage y data-bar. El primero es el valor porcentual de 0-100. El segundo es el color de la barra animada. Como el complemento crea un lienzo para animar el progreso del círculo, tendremos que pasar el color.

Conclusión

Estos son solo tres ejemplos de infografías de datos que puede agregar a sus páginas HTML, pero incluso estos llevarán su experiencia de presentación al siguiente nivel. Si utiliza infografías de datos en plantillas o temas de CMS, le recomiendo que agregue la mayor personalización posible, como los tamaños, la compatibilidad con iconos adicionales y las micro animaciones.

Usted es libre de usar todos los ejemplos en los archivos de ejercicios, y es libre de modificar y hacer sugerencias en los comentarios a continuación. ¡Gracias por leer!

web templates with infographics on Envato Elementsweb templates with infographics on Envato Elementsweb templates with infographics on Envato Elements
Plantillas web con infografías sobre Envato Elements.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.