Главная jQuery Анимация отсчёта на jquery-spincrement

Анимация отсчёта на jquery-spincrement

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

Работать это будет таким образом, что при попадании блока в видимую область, будет запускаться отсчёт чисел от меньшего к исходному значению в элементе.

Подключение нужных библиотек

Для реализации примера нам потребуется библиотека JQuery, а так же JQuery.Spincrement. Ссылка на библиотеку JQuery.Spincrement вы можете найти в конце поста. Подключать их можно в head -заголовке страницы, либо в самом конце документа.

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/jquery.spincrement.min.js"></script>

Разметка довольно простая, в нашем примере блоков всего 4, и выведены они в одну линейку посредством CSS. Вся линейка чисел заключена в блок с классом .inf-fact-counters, который используется для отслеживания позиции данного блока в видимой части экрана. Сами значения чисел указаны в элементе .fct-count span.

<div class="int-fact-counters">
    <div class="int-fct-item">
        <div class="fct-count"><span>10</span></div>
        <div class="fct-text">years to our club</div>
    </div>
 
    <div class="int-fct-item">
        <div class="fct-count"><span>90</span></div>
        <div class="fct-text">winners in international competitions</div>
    </div>
 
    <div class="int-fct-item">
        <div class="fct-count"><span>12</span></div>
        <div class="fct-text">gyms equipped with the latest equipment</div>
    </div>
 
    <div class="int-fct-item">
        <div class="fct-count"><span>2</span>k</div>
        <div class="fct-text">people come to us for training every month</div>
    </div>
</div>

Логика тут простая, при загрузке либо скроллинге страницы проверяется позиция элемента с этим классом. Если элемент находится в видимой части экрана, но инициализируется анимация для элемента с классом .fct-count span.

var Animation = function() {
    var hFrom = $(window).scrollTop();
    var hTo = $(window).scrollTop() + ($(window).height() / 3);
    if ($(".int-fact-counters").offset().top > hFrom && $(".int-fact-counters").offset().top < hTo){
        $('.fct-count span').delay(500).spincrement({
            thousandSeparator: "",
            duration: 3000
        });
    }
};
$(window).scroll(function() {
    Animation();
});
Animation();

Инициализация отсчёта происходит с помощью библиотеки jquery-spincrement, и переделать событие по которому будет запускаться отсчёт можно по-своему. В моём случае это положение блока в видимой части сайта. А в действительности можно закрепить реакцию на любом обработчике событий документа.

Пример демо
Скачать исходники
Плагин jquery-spincrement

Опубликован: 03.01.2020 г.