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

Cómo crear el gráfico animado de un termómetro con CSS

by
Difficulty:IntermediateLength:MediumLanguages:

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

Hasta el momento, en nuestra serie de tutoriales de gráficos con CSS, te he enseñado a crear un gráfico de columnas, un gráfico de barras y un gráfico de dona (rosquilla) en semicírculo.

En este tutorial cubriré el proceso para crear el gráfico animado de un «termómetro» con CSS puro; la forma perfecta para rastrear el logro de un solo objetivo.

Lo que crearemos

Aquí está el gráfico que crearemos (presiona reload [recargar] para verlo animado):

1. Empieza con los datos

Para los fines de esta demostración, necesitaremos algunos datos. Trabajemos con algunas cifras ficticias que describen la financiación de una organización benéfica a lo largo de los años:

Año Financiación
2018 €95,000
2016 €72,000
2015 €50,000
2012 €35,000
2010 €15,000

Como habrás adivinado, nuestro reto es visualizar estos datos en un gráfico de termómetro. Nos inspiraremos visualmente en esos problemáticos bienhechores Extinction Rebellion (si no has oído hablar de ellos, ¡mira lo que están haciendo!).

2. Especifica el marcado de la página

Especificaremos un elemento de envoltura que contiene tres listas: 

  • La primera lista establece el rango del eje Y. Si miras más de cerca los datos de la tabla anterior, verás que la segunda columna incluye valores de hasta 95,000. Considerando esto, definiremos seis valores de 0 a 100,000 con un tamaño de paso de 20,000. Por lo tanto, los valores del eje y serán 0, 2,000, 40,000, 60,000, 80,000 y 100,000.
  • La segunda lista establece los datos del eje X. Estos se extraen de la primera columna de nuestra tabla, de menor a mayor. Pero su orden no importa porque los posicionaremos de manera absoluta. No obstante, observa en el marcado a continuación, que un elemento de la lista contiene el mismo año dos veces. Podríamos haber omitido poner el año como nodo de texto del elemento. Pero es importante almacenar este valor en el atributo data-year. Como veremos posteriormente, pasaremos el valor de este atributo al pseudoelemento relacionado :: before.
  • La tercera lista agrupa los datos de la tabala mencionada anteriormente, desde el valor de financiación más alto hasta el más bajo. Nuevamente, aquí el orden no es importante. También puedes mostrarlos desde el más bajo al más alto. Esto depende completamente de ti.

Aquí está el marcado que se requiere:

3. Define algunos estilos básicos

A continuación, configuraremos algunas variables CSS y algunos estilos comunes de restablecimiento:

Aquí no ocurre nada realmente espectacular, pero tal vez una cosa a tener en cuenta es que, además de la conocida fuente serif del sistema «Georgia», también he utilizado la fuente premium «Cheddar Gothic» de Envato Elements.

Cheddar Gothic Font Family
Familia de fuentes Cheddar Gothic en Envato Elements

Nota: Para simplificar, no explicaré detalladamente todas las reglas de CSS en el tutorial. Puedes revisar el resto de ellas haciendo clic en la pestaña CSS del proyecto de demostración.

4. Estiliza el gráfico

La envoltura del  gráfico será un contenedor de cuadrícula con contenido centrado de manera horizontal. Cada columna (lista) tendrá su ancho predeterminado, con un espacio de 4rem entre ellas.

The grid container layout

Aquí está el CSS relacionado:

El eje Y

La primera lista que contiene los datos del eje Y también se comportará como un contenedor de cuadrícula. Habrá un espacio de 3rem entre los elementos:

The layout of the y-axis

Aquí está el CSS asociado:

El eje X

La segunda lista que incluye los datos del eje X tendrá un ancho fijo de 50px. Además, le daremos algunos estilos adicionales para que tenga la apariencia de un termómetro real:

The layout of the x-axis

Los estilos correspondientes son los siguientes:

Los elementos de la lista estarán posicionados de manera absoluta con una altura inicial de 0 por defecto, por lo tanto, serán invisibles. Otra cosa que hacemos es establecer su color de primer plano como transparente. En tal caso, el texto que contiene el año no será visible:

Para el siguiente paso, especificaremos algunos estilos para su pseudoelemento :: before. Recuerda que su contenido incluirá el valor del atributo data-year asociado (ve el marcado anterior). Además, estará oculto al principio:

The layout of the before pseudo-element

Los estilos requeridos:

Anima los elementos

Tan pronto como se cargue la página, la altura de los elementos de la lista se animará y recibirá un valor que será determinado por el valor de financiación asociado (mira la tabla anterior). Por ejemplo, un valor de 15,000 corresponde a height: 15%. Además de los elementos de la lista, también se animará su pseudoelemento :: before, aunque las animaciones no se ejecutarán simultáneamente. Primero el elemento se hará visible, luego su pseudoelemento.

Ahora vamos a convertir todos los requisitos anteriores en código.

Cuando la página se cargue, primero añadiremos la clase loaded a body:

En ese punto los elementos pueden ser animados de manera secuencial. Para lograrlo, aprovecharemos una técnica utilizada en mis anteriores demostraciones de gráficos. Definiremos dos variables CSS que determinan la velocidad de transición (siéntete libre de cambiarlas si es necesario) y las combinaremos con la función calc().

Aquí están los estilos CSS responsables de revelar los elementos del eje X:

Como ya he mencionado en las anteriores demostraciones de gráficos, Microsoft Edge no es compatible con estas operaciones matemáticas, por lo que si necesitas admitirlo, deberás pasar algunos valores estáticos, como este:

Nota: Podría haber definido la propiedad transition-delay fuera de la clase loaded de esta forma:

En cualquier caso, el resultado será el mismo; la animación no se ejecutará hasta que la página se cargue. Únicamente elegí incluir esa propiedad dentro de la clase loaded porque quería limitar el código CSS y agrupar las propiedades que comparten el mismo selector, por ejemplo esas dos:

Como ya se comentó en los pasos anteriores, el pseudoelemento ::before también debería aparecer en la carga de la página:

Pero con un retraso aún mayor:

Las etiquetas

La tercera lista que incluye los datos de la tabla estará oculta de forma predeterminada.

The layout of the third list

Pero en el momento en que las animaciones de los gráficos finalicen, aparecerá:

Observa el valor de la propiedad transition-delay que se establece en 3.8s. Utilizaremos este valor porque la propiedad transition-delay del último elemento :: before del eje x se establece en 3.6s:

The transition-delay property of the last before element of the x-axis

Por último, usaremos el pseudoelemento ::before de su lista de elementos para crear el colorido rectángulo que aparece en la esquina izquierda de cada elemento:

The colorful rectangle

Aquí están los estilos que se necesitan para eso:

¡Así se ve nuestro proyecto final!

Conclusión

¡Eso es todo, amigos! En este tutorial, creamos el gráfico animado de un termómetro con CSS puro. Espero que este ejercicio haya sido interesante y que los desafíe a crear sus propios gráficos con CSS.

Como siempre, ¡gracias por leer!

Más tutoriales sobre gráficos y animación

Advertisement
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.