Анимированное увеличение чисел на 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, данный блок в моем случае является неким общим контейнером, в котором находятся три счетчика. Разумеется этих счетчиков может быть сколько угодно.

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

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (7)

095 23 декабря 2016 г. в 15:48

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

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

Ответить

Сергей 10 декабря 2016 г. в 23:18

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

Ответить

Игорь 7 декабря 2016 г. в 00:25

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

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

Ответить

Кирилл 27 октября 2016 г. в 09:23

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

Ответить

Дмитрий 9 мая 2016 г. в 13:29

Мне нужно чтобы начиналось с "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;
}
});
});

Ответить

Роман 9 марта 2016 г. в 21:36

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

Ответить

Юрий 24 октября 2015 г. в 12:47

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

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад