Модуль анимации цифрового счетчика

Подключение модуля

[HTML] Пишем HTML-структуру счетчика(ов) и добавляем атрибут data-digits-counter к каждому из них. В середине тега-счетчика должно быть только число:

<div class="counters">
	<div data-digits-counter class="counters__item">1500</div>
	<div data-digits-counter class="counters__item">500</div>
	<div data-digits-counter class="counters__item">800</div>
</div>

[JS] В файле js/app.js раскомментируем строку flsScroll.digitsCounter();

(!) Модуль нуждается в подключении модуля наблюдателя . Следовательно, нужно подключить его и добавить атрибут data-watch родительскому элементу со счетчиками:

[JS] В файле js/app.js раскомментировать строку import ‘./libs/watcher.js’

<div data-watch class="counters">
	<div data-digits-counter class="counters__item">1500</div>
	<div data-digits-counter class="counters__item">500</div>
	<div data-digits-counter class="counters__item">800</div>
</div>

Дополнительные возможности

Изменение скорости

Для изменения скорости анимации необходимо добавить атрибут data-digits-counter-speed к элементу счетчика и указать скорость в миллисекундах (1000 по умолчанию)

<div data-watch class="counters">
	<div data-digits-counter data-digits-counter-speed="4500" class="counters__item">1500</div>
	<div data-digits-counter class="counters__item">500</div>
	<div data-digits-counter class="counters__item">800</div>
</div>

Форматирование

Существует возможность форматирования вывода цифр, отделяя тысячи сотри тысяч и т.д. Для этого нужно добавить атрибут data-digits-counter-format к элементу счетчика. Для настройки разграничителя можно добавить символ в качестве значения атрибута (по умолчанию пробел)

<div data-watch class="counters">
	<div data-digits-counter class="counters__item">1500</div>
	<div data-digits-counter class="counters__item">50000</div>
	<div data-digits-counter data-digits-counter-format="." class="counters__item">8000</div>
</div>