Набирающиеся цифры

Нашел простое решение на jQuery чтобы сделать набирающиеся цифры при загрузке страницы. Доработал решение viewportChecker, чтобы цифры набирались только при появлении блока с ними на экране.

jQuery("#advantage").viewportChecker({
	callbackFunction: function(elem, action){
		$('.count').each(function () {
			var $this = $(this);
			jQuery({ Counter: 0 }).animate({ Counter: $this.attr('data-stop') }, {
				duration: 1000,
				easing: 'swing',
				step: function (now) {
					$this.text(Math.ceil(now));
				}
			});
		});
	}
});

Верстка:

<div id="advantage">
	<div><p><span class="count" data-stop="2012">0</span></p><span>год открытия</span></div>		
	<div><p><span class="count" data-stop="3">0</span></p><span>филиала на ЮГЕ РОССИИ</span></div>
	<div><p><span class="count" data-stop="30">0</span></p><span>квалифицированных сотрудников</span></div>		
	<div><p><span class="count" data-stop="800">0</span></p><span>объектов укомплектованных «под ключ»</span></div>
</div>

Тут важны класс count и атрибут data-stop, внутри блока ставим 0. Привожу верстку целиком, тут неплохое решение для текстовых преимуществ.

Стили:

#advantage {margin-bottom: 30px; display: flex; margin-left: -1%; margin-right: -1%;}

#advantage > div {
    display: inline-block;
    width: 23%;
    margin: 0 1%;
    padding: 50px 15px;
    border: 1px solid #eee;
	text-align: center;
}

#advantage > div > p {text-align: center; font-weight: bold; color: #ff9800; font-size: 30px; line-height: 25px;}

#advantage > div > p > span {font-size: 46px; line-height: 50px;}

#advantage > div > span {font-style: italic;}

@media screen and (max-device-width: 800px) { 
	#advantage {flex-wrap: wrap;}
	#advantage > div {width: 48%; margin-bottom: 15px;} 
}
  
@media screen and (max-device-width: 480px) { 
	#advantage > div {width: 100%; margin: 0 0 20px 0; height: auto; opacity: 1;} 
    #advantage > div:last-child {margin-bottom: 0;}
}

На основе этого скрипта можно придумать много интересных реализаций на подобии Progresscircle.

[warning]Вышеописанное решение имеет один недостаток. Все блоки с цифрами при появлении хотя бы одного на экране начинают набирать значения. Если будет несколько блоков, то они наберутся при появлении первого.[/warning]

Множества блоков с набирающимися цифрами

Также в этом скрипте заложена автоматические атрибуты нужных блоков

<div id="features-6"><div class="wrapper"><div class="items columns-4 number-text-vertical counter">
	
	<div class="item"><div>
		<div class="number">365</div>
		<div class="text">
		<h3>Дней в году</h3>
		</div>	
	</div></div>
	
	<div class="item"><div>
		<div class="number">24</div>
		<div class="text">
		<h3>Часа в сутках</h3>
		</div>	
	</div></div>
	
	<div class="item"><div>
		<div class="number">60</div>
		<div class="text">
		<h3>Секунд в минуте</h3>
		</div>	
	</div></div>
				
	<div class="item"><div>
		<div class="number">12</div>
		<div class="text">
		<h3>Месяцев в году</h3>
		</div>	
	</div></div>

	<div class="item"><div>
		<div class="number">8766</div>
		<div class="text">
		<h3>Часов в году</h3>
		</div>	
	</div></div>

	<div class="item"><div>
		<div class="number">384 400</div>
		<div class="text">
		<h3>Расстояние до луны (км)</h3>
		</div>	
	</div></div>
	
</div></div></div>

Скрипт:

jQuery(document).ready(function($){		
	
	// Набирающиеся цифры

	jQuery('.counter .number').each(function(index){
		
		var $this = jQuery(this);
		var $number = jQuery(this).text();
		jQuery(this).attr('data-stop',$number);
		jQuery(this).text('0');		

		$this.viewportChecker({

			offset: 200,
			callbackFunction:function(elem,action){
					
				jQuery({ Counter: 0 }).animate({ Counter: $this.attr('data-stop') }, {
					duration: 1000,
					easing: 'swing',
					step: function (now) {
						$this.text(Math.ceil(now));
					}
				});					

			}
		});

	});
	
});

[site-socialshare]