Блог веб-разработчика v 1.0.0
Symfony2, AngularJS, React, Gulp, PhpStorm и много других страшных слов

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

10 лет назад
10794 просмотра
JavaScript Полезности

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

Что еще почитать