Анимация цифр на сайте на JS

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

Получается нужно добавить анимацию чисел на сайт? Быстрое гугление подсказало плагин Odometer https://github.com/HubSpot/odometer. Судя по репозиторию плагин не поддерживается, но вполне работоспособный и для быстрого решения подойдет.

Делаем анимацию цифр на сайте с помощью Odometer

Можно скачать CSS и Javascript файлы с репозитория ‎‎Github, я для простоты подключу их по ссылкам.‎

Итак, добавим в наш html:

<link href="https://github.hubspot.com/odometer/themes/odometer-theme-default.css" rel="stylesheet">
<script src="https://github.hubspot.com/odometer/odometer.js"></script>

‎Теперь нужно указать какой html-элемент будет отображать двигающиеся цифры. Odometer требует, чтобы мы добавили id:

<p class="odometer" id="odometer"></p>

Поскольку у нас несколько блоков с цифрами, лучше так:

<p class="odometer" id="odometer1"></p>
<p class="odometer" id="odometer2"></p>

Теперь, чтобы все заработало, достаточно добавить небольшой код в блок script:

<script>
        setTimeout(function () {
	// Указываем какой элемент и нужную цифру
            odometer1.innerHTML = 2409;
            odometer2.innerHTML = 42;
        }, 100);

</script>

Обновим страницу, теперь у нас есть 2х анимации чисел в виде счетчиков (одометров).

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

UPD

Как сделать чтобы скрипт срабатывал только когда видны цифры?

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

Счетчики начинают работать как только мы загрузили страницу, даже если они не видны пользователю и чтобы их увидеть нужно скролить.

Получится не приятный момент, пока пользователь доскролии до счетчиков они уже перестанут анимироваться и вся наша работа по украшательству не имеет смысла.

Решить проблему мне помог этот код, который определяет находится ли нужный элемент в области просмотра

Изменим наш js код в блоке script:

var isInViewport = function (elem) {
            var distance = elem.getBoundingClientRect();
            return (
                distance.top >= 0 &&
                distance.left >= 0 &&
                distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                distance.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        };
        
        var findMe = document.querySelector('.counter-start');

        window.addEventListener('scroll', function (event) {
            if (isInViewport(findMe)) {
                setTimeout(function () {
                    odometer1.innerHTML = 2409;
                    odometer2.innerHTML = 42;
                }, 100);
            }
        }, false);

И добавим в html, перед нашими цифрами:

<div class="counter-start"></div>

Теперь, если контента на станице много, а наши цифры находятся вне видимости пользователя, они не будут анимироваться пока пользователь не доскролит до элемента class=»counter-start».

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

JS