Odometer - красивый переход между числами

Odometer - библиотека, написанная на JS, реализующая симпатичный эффект смены чисел либо букв "перекатом барабана". Вспомните игровые автоматы, тянешь за ручку и различные фигуры крутятся на нескольких барабанах. Odometer реализует такой эффект практически на любом элементе. В демо присутствуют несколько тем оформления и, конечно, описание работы с библиотекой.

Как использовать?

Для начала требуется полключить файл со стилями и сам JS код (который, кстати, не требует jQuery):

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

По умолчанию библиотека даже не требует настроек. При изменении содержимого любого элемента с классом odometer будет применен описанный эффект.

Изменять содержимое можно любым удобным способом:

element.innerHTML = 123 // Нативный JS
$('.odometer').html(123) // jQuery

Но на самом деле библиотека содержит не мало настроек. настройки задаются в глобальном объекте.:

window.odometerOptions = {
 auto: false, // Отключить авто-инициализацию для элементов с классом 'odometer'
 selector: '.my-numbers', // Изменить селектор дочерних элементов для анимации
 format: '(,ddd).dd', // Изменить формат представления дробных чисел. Так же можно задать большее кол-во знаков после запятой
 duration: 3000, // Длительность анимации
 theme: 'car', // Тема
 animation: 'count' // Вид анимации
};

Для особых случаев можно вручную проинициализировать odometer для нужного элемента:

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

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

 // Остальные опции передаются в этом же объекте
 format: '',
 theme: 'digital'
});

od.update(555)
// или как обычно
el.innerHTML = 555

Посмотреть демо: http://github.hubspot.com/odometer/docs/welcome/

Проект на GitHub: https://github.com/HubSpot/odometer