Odometer – animando transições entre números

Neste post rápido vou apresentar como utilizar o Odometer, uma biblioteca JavaScrip/CSS para criar transições animadas entre números no estilo contagem.

Você já deve ter visto este tipo de animação em algum website com layout moderno, normalmente é utilizado para trazer informações numéricas de gráficos ou números relevantes relacionados a produtos ou serviços.

Documentação & exemplo: GitHub

Alguns exemplos para facilitar:

Odometer example - Web Social Dev
Exemplo do site awwwards.com
Odometer example - Web Social Dev
Exemplo do site croscon.com
Odometer example - Web Social Dev
Exemplo do site vivaco.com

Esses exemplos não necessariamente foram elaborados com o Odometer mas com ele conseguimos reproduzi-los facilmente.

Como utilizar

Fiz um exemplo próprio, você pode baixar ele aqui Demo.

Para utilizar o Odometer basta linkar os arquivos CSS e JS da biblioteca em uma pagina HTML e chamar a função com jQuery ou JavaScript.

No nosso teste básico utilizamos os arquivos de referência hospedados no GitHub, conforme exemplo:

<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-default.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

Com os arquivos necessários linkados basta adicionar o id odometer em qualquer elemento que apresente números na página.

No teste colocamos um número dentro de uma div com o id odometer, conforme abaixo:

<div class="box" align="center">
  <div id="odometer" class="odometer">24</div>
</div>

Logo em seguida, declaramos a função JavaScript que vai gerar a transição animada dos números. Você também pode utilizar uma função em jQuery para iniciar o odometer.

<script type="text/javascript">
  setTimeout(function(){
    odometer.innerHTML = 12;
  }, 1000);
</script>

Aqui utilizamos o método JavaScript setTimeout para que a função seja iniciada após 1000 milesegundos, que representa um segundo.

Resultado:

Odometer example - Web Social Dev

No nosso exemplo não declaramos nenhum estilo CSS para alterar o visual dos elementos, mas caso você queira alterar o estilo de uma forma simples, basta declarar uma tag <style> logo após o script que inicia o odometer.

Experimente colar este estilo após o script:

<style type="text/css">
  .odometer {
    color: gold;
    background-color: green;
    border-radius: 5px;
    padding: 15px 30px 15px 30px;
    border: 5px solid #424242;
  }
</style>

Agora caso você deseja ter mais controle sobre a execução do odometer, você pode utilizar as configurações avançadas, declarando um objeto, conforme o exemplo abaixo:

window.odometerOptions = {
  auto: false, // iniciar automaticamente qualquer elemento com o id ou class 'odometer'
  selector: '.my-numbers', // define qual elemento será animado
  format: '(,ddd).dd', // formato de exibição dos números considerando casas decimais
  duration: 3000, // duração da animação
  theme: 'car', // tema, caso você tenha mais de um css para o odometer
  animation: 'count' // método de animação
};

Formatos de exibição:

Formato   -  Exemplo
(,ddd)    -  12,345,678
(,ddd).dd -  12,345,678.91
(.ddd),dd -  12.345.678,91
( ddd),dd -  12 345 678,91
d         -  12345678

Esses formatos são utilizado para alterar a forma como são exibidos os números após executar a função, considerando casas decimais para facilitar a visualização dos números.

Conclusão

Existem mais funcionalidades para o Odometer, basta dar uma olhada na documentação completa no GitHub.

Com o exemplo que elaboramos já da para reproduzir efeitos como os dos exemplos apresentados no inicio, sem precisar utilizar as funcionalidades avançadas.

É isso galera, obrigado. 🙂