JS Animated. Как использовать счётчик CountTo

HTML Веб-шаблоны сайтов используют расширение countTo.js, для того чтобы добавить счётчики на страницы сайта. Сегодня Вы узнаете, как с ними работать.

В вашем шаблоне может быть отдельная страница (html файл) для отображения счётчиков или индикаторов процесса. Давайте откроем файл progress-bars.html для редактирования. В нашем случае – это страница Автобусы, Мили, Водители и Пассажиры (Buses, Miles, Drivers and Passengers).

Создание нового счётчика

Для создания нового счётчика, добавьте следующий код HTML в содержимое страницы:

<div class="counter" data-from="25" data-to="125"></div>

где атрибут data-from отвечает за источник счетчика, а атрибут data-to — за финальный результат, который будет отображен на странице.

Коррекция рабочего времени счётчика

Для того чтобы изменить скорость подсчёта добавьте атрибут data-speed и задайте временной интервал подсчёта, в миллисекундах.

Например,

<div class="counter" data-from="25" data-to="125" data-speed="5000"></div>

Интервал обновления счетчика

Для того чтобы изменить интервал времени между обновлениями счётчика, добавьте атрибут data-refresh-interval и задайте нужный интервал времени в миллисекундах.

Например,

<div class="counter" data-from="25" data-to="125" data-speed="5000" data-refresh-interval="300"></div>

Вы можете также ознакомиться с детальным видео-туториалом ниже: