Коды всех смайликов «ВКонтакте» с обозначениями
Артем Мáлков
215 просм
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
Текст комментария