SummArg | Cursos y recursos para webmasters

18/10/2013

Animación de números con Odometer

Odometer es una librería Javascript-CSS3 que sirve para hacer animaciones con números con algunos estilos predeterminados (permite construir estilos propios, obviamente), y resulta práctico pues tiene corre sólo o con jQuery y tiene su fallback.

Posee varias opciones de configuración que nos permiten establecer el formato de los números, la velocidad de la transición, el tipo de animación, el theme a aplicar, etc. Pueden revisar su documentación y ejemplos aquí mismo.

Para utilizarlo en un proyecto primero lo debemos descargar desde github y añadir los archivos a nuestro documento.

<link rel="stylesheet" href="odometer-theme-car.css" />
<script src="odometer.js"></script>

En nuestro HTML le añadimos al elemento que queremos animar la clase .odometer, y finalmente le indicamos a Odometer lo que debe hacer.

element.innerHTML = 123 // Nativo
$('.odometer').html(123) // jQuery

counter

Dejar un comentario