Crea un odómetro (cuenta kilómetros) con CSS y JavaScript

Odometer es un muy buen recurso desarrollado con JavaScript combinado con CSS para mostrar un bonito odómetro, estilo cuenta kilómetros, de una forma sencilla.

Este proyecto no solo reproduce visualmente a la perfección a este famoso instrumento de medición, también contempla aspectos vinculados a la animación de este objeto. La biblioteca completa tiene un peso inferior a los 3kb en su versión simplificada y comprimida utilizando gzip, un valor muy acorde a la función de este elemento.

La compatibilidad de este recurso puede ser uno de sus puntos débiles, al menos si nuestros visitantes en promedio utilizan navegadores antiguos. Odometer funciona perfectamente en los navegadores modernos -y no tanto- siendo su único requisito aceptar transformaciones de CSS3.

Navegadores compatibles: Internet Explorer 8+, Firefox 4+, Safari 6+ y Chrome en todas sus versiones.

Las animaciones de este elemento se realizan íntegramente empleando CSS3, la ventaja de esto es optimizar el consumo de recursos, evitando sobrecargar el navegador del usuario con código JavaScript con interminables setTimeout.

Además de las cuestiones puramente técnicas, Odometer cuenta con temas visuales, un puntos más que favorable si lo que buscamos una integración fluida y visualmente armónica con nuestros proyectos. Estos temas permiten definir aspectos como el color, tamaño y tipo de tipografía, todo perfectamente documentado y listo para ser implementado.

El creador de este proyecto planeo perfectamente lo relacionado a la integración, podemos utilizar la biblioteca en sitios que utilicen jQuery aprovechando sus ventajas, o bien directamente JavaScript puro y duro. Si lo deseamos podemos emplear Odometer sin ninguna dependencia.

El odómetro puede ser interactivo fácilmente, para ello la documentación oficial explica como actualizar su valor haciendo uso de los mecanismos provistos, apenas unas lineas de código y ya tendremos nuestro cuentakilómetros actualizado.

Ejemplo de uso:

var el = document.querySelector('.some-element');

od = new Odometer({
el: el,
value: 333555,

// Any option (other than auto and selector) can be passed in here
format: '',
theme: 'digital'
});

od.update(555)
// o
el.innerHTML = 555

Si este recurso les parece interesante les recomiendo visitar la demostración online.