«M. Weather» – бесплатный бот-информер погоды «ВКонтакте»
6 520 просм
0 комм
Поделиться:

Простая анимация увеличения/уменьшения чисел на jQuery

Видел множество лейдингов, зайдя на которые, видишь информационный блок, например, число клиентов. Начинаешь спускаться – и скучное число «0» вскоре превращается в тысячи тысяч.

Даже не столько привлекает внимание число, сколько его эффектное появление. О том, как сделать такую анимацию, я сейчас расскажу. Существуют различные библиотеки для создания подобного эффекта, я же покажу, как это можно сделать гораздо проще.

Предположим, что у нас есть блок с ценой:

<div class="price">0</div> 

Что нам нужно сделать? Анимацию увеличения числа от 0 до, например, 1000. Скрипт будет выглядеть следующим образом:

<script>
	$(function () {
		$({numberValue: 0}).animate({numberValue: 1000}, {
			duration: 500, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд
			easing: "linear",
			step: function(val) {
				$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
			}
		});
	});
</script> 

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

<script>
	$(function () { 
		var numb_start = $(".price").text(); // Получаем начальное число 
		$({numberValue: numb_start}).animate({numberValue: 1000}, { 
			duration: 500, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд 
			easing: "linear", 
			step: function(val) {  
				$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию 
			} 
		});
	}); 
</script>

Соответственно, переменная «numb_start» хранит в себе число из блока.

Автоматическая анимация увеличения/уменьшения чисел на jQuery

А если блок с числами находиться в самом низу? И при заходе на сайт пользователь просто не увидит вашей анимации? Решение есть! Нам просто нужно определить, виден ли блок на экране, и если да – запустить анимацию.

Реализация:

<script> 
	$(function () { 
		var target_block = $(".price"); // Ищем блок 
		var blockStatus = true;  
		$(window).scroll(function() { 
			var scrollEvent = ($(window).scrollTop() > (target_block.position().top - $(window).height())); 
			if(scrollEvent && blockStatus) {  
				blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы. 
				$({numberValue: 0}).animate({numberValue: 1000}, { 
					duration: 500, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
					easing: "linear", 
					step: function(val) {  
						$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию 
					} 
				}); 
			} 
		}); 
	}); 
</script> 

Обратите внимание, что если начальное число больше конечного, то во всех случаях автоматически будет происходить анимация уменьшения.

0
комментарий
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария