/ Сайтостроение / Scripts & jquery / Набирающиеся цифры

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

29.06.2019

213

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Нашел простое решение на 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.

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Набирающиеся цифры Набирающиеся цифры
FlexBlock. Современная верстка
Рекомендации для васFlexBlock. Современная версткаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.