Как создать плавный переход номеров для вашего сайта

Одним из эффективных способов сделать представление числовой информации более интересным является добавление анимации перехода. Создание анимации перехода может быть сделано с помощью JavaScript, но кодирование займет у вас много времени. Для более быстрой альтернативы, попробуйте одометр,

одометр это плагин javascript, который может помочь вам сделать вашу числовую информацию более привлекательной благодаря плавным переходам и интересным темам. Он прост в настройке и поддерживается во многих современных браузерах.

Рекомендуемое чтение: как реализовать эффект бесконечной прокрутки страниц в статических веб-страницах [Tutorial]

Реализация
Одометр – это отдельный плагин javascript. Вам нужно только включить файл js и его тему на страницу с помощью следующего кода:

Вы сделали! Теперь любой элемент, который вы оберните с помощью класса одометра, будет преобразован в одометр.

В этом примере я использую тему одометра автомобиля. Одометр поставляется с шестью другими различными темами, а именно: тема по умолчанию, цифровая, минимальная, площадь, игровые автоматы и железнодорожные темы. Вы можете отправиться на демонстрационная страница чтобы увидеть их в действии.

Чтобы обновить значение, вы можете использовать как собственный javascript, так и код jQuery. Сначала вызовите функцию setTimeout, затем определите обновленное значение, как показано в следующем фрагменте:

Или вы можете использовать форму jQuery следующим образом:

SetTimeout (функция () {
  $ ( ‘Одометр’) HTML (5555).
}, 1000);

Значение 1000 в коде означает, что процесс обновления будет выполнен через одну секунду после полной загрузки страницы.

Затем добавьте класс одометра к любому элементу, который вы хотите, например:

3252

И значение 3252 будет затем изменено на 5555 (как определено ранее) с классным переходом.
Опции
Для более продвинутых функций, одометр предоставляет вам некоторые возможности для настройки. Это полезно, когда настройки по умолчанию вам не подходят. Чтобы иметь возможность устанавливать параметры, сначала создайте объект odometerOptions, например, так:

Параметр форматирования будет влиять на правило форматирования чисел, например показ десятичной точки перед определенными цифрами. (ddd) означает, что в числе нет десятичной точки. И для других вариантов, проверьте следующий список:

window.odometerOptions = {
  auto: false, // Не инициализировать все автоматически с помощью класса «одометр»
  selector: ‘.my-numbers’, // Изменить селектор, используемый для автоматического поиска объектов для анимации
  format: ‘(, ddd) .dd’, // Изменить, как форматируются группы цифр и сколько цифр отображается после десятичной точки
  duration: 3000, // Изменение времени ожидания JavaScript-анимации CSS
  theme: ‘car’, // Укажите тему (если на странице более одного css-файла темы)
  animation: ‘count’ // Count – более простой метод анимации, который просто увеличивает значение,
                     // использовать его, когда вы ищете что-то более тонкое.
};

Вывод
Для тех, кто часто представляет числовую информацию и хотел бы сделать ее более привлекательной, одометр является хорошим выбором. Просто учтите, что если вы введете что-то кроме числа, плагин не будет работать. В любом случае, попробуйте и дайте нам знать, что вы думаете!