+7 926 070-36-31
Москва и Московская область

Анимация счетчика чисел при прокрутке страницы

19.02.2018

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

Данный пример рассмотрим на сайте под управление 1С-Битрикс с использованием плагина spincrement.

Поэтому Мы сначала открываем шаблон нашего сайта и в теге <head> подключим плагин, который своевременно скачали.Так же убедитесь, что подключен плагин Jquery.

P.S. Архив с плагином приложен к статьй, вместе с примером от разработчика на GitHub

<script src="<?=SITE_TEMPLATE_PATH?>/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.spincrement.js"></script>

Добавляем блоки с числами в наш шаблон сайта или модуля. Добавим два блока для примера: один - обычное число, второй - число с процентом.

<span class="count">10</span>
<span class="count2">100</span>%


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

function countup(className){ //className - имя класса, в котором есть число
        var countBlockTop = $("."+className).offset().top; //смещение блока с числом относительно верхнего края	
        var windowHeight = window.innerHeight;//высота окна браузера
	var show = true;// отвечает, что если один раз счетчик сработает, больше не срабатывал
					
	$(window).scroll( function (){
		if(show && (countBlockTop < $(window).scrollTop() + windowHeight)){ 
			show = false; //если мы видим число, то больше его не надо показывать
						
			$('.'+className).spincrement({ //вызов плагина с параметрами 
				from: 1,               //начинать с 1
				duration: 4000,        //задержка счетчика
			});
		}
	})	
}
Теперь добавляем вызов функции счетчика

$(function() {
				countup("count");
				countup("count2");

});
В итоге у меня получилась такая запись.

<script type="text/javascript" src="<?=SITE_TEMPLATE_PATH?>/js/jquery.spincrement.js"></script>

<script>
	
	function countup(className){
		var countBlockTop = $("."+className).offset().top;
		var windowHeight = window.innerHeight;
		var show = true;
					
		$(window).scroll( function (){
			if(show && (countBlockTop < $(window).scrollTop() + windowHeight)){ 
				show = false;
						
				$('.'+className).spincrement({
					from: 1,
					duration: 4000,
				});
			}
		})	
	}

	
        $(function() {
		countup("count", $(".count").text());
		countup("count2", $(".count2").text());
        });
				
   
</script>

Наш код готов, можем проверять. У меня данный механизм реализован ниже статьи.

Со всеми настройками плагина можно ознакомиться на странице github.


Файл: Плагин spincrement Загрузить

Возврат к списку

  • Хотите быть в курсе добавления новых видео?
  • Хотите участвовать в выборе тем уроков?
Подписывайтесь!


6лет
опыта
разработки
49
выполненых
проектов
100%
клиентов
нас рекламируют своим друзьям
6 лет
разрабатываю
сервисы для Гос органов