Анимированное увеличение чисел на jQuery

Анимированное увеличение чисел (далее счетчики) сейчас можно встретить на многих сайтах, ведь с их помощью можно отобразить числа в более интересной и привлекательно форме.

Данный эффект выглядит, как плавное увеличение числа от 0 до какого-то конечного числа. Я уверен, что вы уже неоднократно встречали подобные счетчики.

Как правило их применяют для вывода какой-либо статистики, например, общего количества пользователей, подписчиков, клиентов и т.д.

В этом уроке я покажу, как такой счетчик вы можете установить на своем сайте.

Для этих целей мы воспользуемся уже готовым плагином, которое называется jquery.spincrement.js

Он и позволит нам создать эффект анимированного увеличения чисел.

Быстрый старт

Чтобы данный скрипт начал работать, нам необходимо:

1. Скачать его с GitHub и подключить между тегами head. При этом, библиотека jQuery, также должна быть подключена, иначе ничего работать не будет.

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

2. Обернуть то число (или числа), которые вы хотите анимированно показать, в какой-нибудь тег и задать класс spincrement.

<span class="spincrement">4089</span>

3. Проинициализировать плагин

$(".spincrement").spincrement();

Если вы все сделали правильно, то наши числа начнут анимированно выводиться.

Настройка плагина

У данного плагина есть небольшой ряд настроек, с помощью которых вы можете сделать работу счетчика более гибкой.

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

$(".spincrement").spincrement({
    from: 0,                // Стартовое число
    to: false,              // Итоговое число. Если false, то число будет браться из элемента с классом spincrement, также сюда можно напрямую прописать число. При этом оно может быть, как целым, так и с плавающей запятой
    decimalPlaces: 0,       // Сколько знаков оставлять после запятой
    decimalPoint: ".",      // Разделитель десятичной части числа
    thousandSeparator: ",", // Разделитель тыcячных
    duration: 1000          // Продолжительность анимации в миллисекундах
});

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

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

Запускаем анимацию в момент прокрутки страницы

Для этих целей я написал небольшой скрипт

$(document).ready(function(){
    var show = true;
	var countbox = "#counts";
	$(window).on("scroll load resize", function(){
		if(!show) return false;                   // Отменяем показ анимации, если она уже была выполнена
		var w_top = $(window).scrollTop();        // Количество пикселей на которое была прокручена страница
		var e_top = $(countbox).offset().top;     // Расстояние от блока со счетчиками до верха всего документа
		var w_height = $(window).height();        // Высота окна браузера
		var d_height = $(document).height();      // Высота всего документа
		var e_height = $(countbox).outerHeight(); // Полная высота блока со счетчиками
		if(w_top + 200 >= e_top || w_height + w_top == d_height || e_height + e_top < w_height){
			$(".spincrement").spincrement({
				thousandSeparator: "",
				duration: 1200
			});
			show = false;
		}
	});
});

А вот так выглядит сам блок со счетчиками

<section class="section" id="counts">
<div class="container clearfix text-center">
<h3>Lorem ipsum dolor</h3>
<div class="col-4">
<div class="circle">
<span class="spincrement">4089</span>
</div>
<p class="label">подписчиков</p>
</div>
<div class="col-4">
<div class="circle">
<span class="spincrement">146</span>
</div>
<p class="label">клиентов</p>
</div>
<div class="col-4">
<div class="circle">
<span class="spincrement">785</span>
</div>
<p class="label">партнеров</p>
</div>
</div>
</section>

Теперь анимация будет запущена только в том случае, если пользователь прокрутил страницу до блока #counts, данный блок в моем случае является неким общим контейнером, в котором находятся три счетчика. Разумеется этих счетчиков может быть сколько угодно.

Более подробно о работе данного скрипта я рассказал в своем уроке.

Добавить комментарий

  • Здравствуйте) Почему у меня к дробным числам добавляет много нулей? Например с 3.1 => 3.10000000000

  • Просто хочу сказать спасибо за готовое рабочее решение 🙂

  • Подключаю в Вордпресс, не работает, консоль выдаёт ошибку:
    Uncaught TypeError: $ is not a function
    at custom.js:1

    • У вас, скорей всего, либо jQuery не подключена к странице, либо подключена, но после скрипта jquery.spincrement.js

      • 19.08.2018 12:38

        В вордпресе же уже подключён jQuery по умолчанию! Обязательно нужно подключить тот что тут? Конфликта между ними не будет?

      • Если подключить сразу 2 библиотеки, то конечно же будет конфликт. Вы можете прислать ссылку на сайт? А то просто так сложно гадать в чем причина.

  • Все отлично работает. Но как сделать, чтобы конечные значения счетчика менялись автоматически в зависимости от заранее установленной даты: первое значение +1 каждый год, второе +10 каждый день и третье +3 каждый час

  • Как сделать счетчик для каждого ip адреса или логина чтоб увеличивался через заданное время

    • Михаил, могу помочь в твоем вопросе, как тебя в вк найти? Или на почту мне напиши zlojnaxa@gmail.com

  • 07.07.2017 17:28

    я может не доглядел, поэтому у меня фром0 не сработал, хз. но глянув на гитхабе увидел data-from и data-to нужно в них проставить значения, а в текущее значение счетчика в хтмл поставить 0

  • 07.07.2017 17:18

    from: 0 не работает, начинает отсчет с чисел, которые прописаны в html

  • 23.12.2016 15:48

    все стандартно ок, но только как бы этот эффект применить к числам которые в стилях, например:
    <span style="width:30%"></span>

    (это анимация прогрессбара)

  • Спасибо, все очень доходчиво. Вы молодец!

  • А куда добавить в Joomla
    <script src="js/jquery.spincrement.js"></script>

    Стили и html код прописал, все выводится в модуле, но нет анимации. Шаблон hexeris от RocketTheme на фреймворке Gantry
    Так и не смог найти куда подключить и положить файл jquery.spincrement.js

  • С false не работает, надо использовать null в опции to.

  • Мне нужно чтобы начиналось с "0", Ставлю from 0 не работает……
    Вот код:
    $(document).ready(function(){

    var show = true;
    var countbox = "#counts";
    $(window).on("scroll load resize", function(){

    if(!show) return false;

    var w_top = $(window).scrollTop();
    var e_top = $(countbox).offset().top;

    var w_height = $(window).height();
    var d_height = $(document).height();

    var e_height = $(countbox).outerHeight();

    if(w_top + 500 >= e_top || w_height + w_top == d_height || e_height + e_top < w_height){
    $(".spincrement").spincrement({
    from: 0,
    thousandSeparator: "",
    duration: 3000
    });

    show = false;
    }
    });
    });

  • Подскажите, как изменить размер шрифта цифр? Всё перепробовал-ничего не помогает, все классы использовал по очереди и даже id. К чему привязана font-size расскажите плиз?

  • 24.10.2015 12:47

    Было бы неплохо записать небольшой видеоурок по консоли. И больше видеоуроков для середнячков и выше. С уважением Юрий.