Случайный выбор победителя «Вконтакте»   •   Online-инструменты
8 860 просм
6 комм
Поделиться:

Простая анимация увеличения/уменьшения чисел на 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> 

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

6
комментарий
Виктор
7.11 в 15:33
Здравствуйте! Хочу реализовать уменьшение скидки до того пока человек не отправит форму. И чтобы сама скидка тоже отправлялась на почту. Подскажите как это можно сделать?
  • 0
Виктор, Здравствуйте!

Прошу прощение за поздний ответ.

Из логики работы скрипта я вижу следующее. Если у вас уменьшение скидки находится на одной странице с формой - то тут все очень просто:

1. Вы запускаете скрипт после первой загрузки страницы и на куках запоминаете, что у этого пользователя уже уменьшается скидка и ее значение (это нужно для того, чтобы у него не сбрасывался счетчик после перезагрузки страницы).

2. Задаете нужную вам скидку и конечное число 0, и сюда же плюсом вы задаете скорость изменения чисел (чтобы он видел что скидка меняется и успел заполнить форму).

3. Как только пользователь нажал кнопку "отправить" - вы считываете значение числа скидки на момент отправки формы и вместе со всеми данными отсылаете их на почту.

Вроде все.

Про куки можете почитать тут - https://www.pandoge.com/moduli_i_skripty/podrobnaya-instrukciya-po-rabote-s-kuki-cookie-na-jquery-php

Про запуск скрипта после загрузки страницы тут - https://www.pandoge.com/stati_i_sovety/vypolnenie-skripta-posle-zagruzki-stranicy-na-jquery
  • 5
Марат
27.01 в 01:38
Отличный короткий скриптик, только не могу переделать его под себя :-( У меня число с ведущими нулями. Т. е., мне надо, чтобы циферки бежали так:

00001
00002
00003
.....
00010
.........
00100
.........
09999
10000
  • 0
Марат, надеюсь этот способ вам поможет.

Весь скрипт используете такой:

<script>
$(function () {
$({numberValue: 0.00001}).animate({numberValue: 0.1}, {
duration: 500, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд
easing: "linear",
step: function(val) {
$(".price").html(val.toFixed(5).substr(2)); // Блок, где необходимо сделать анимацию
}
});
});
</script>
  • 8
DarkShin
22.04 в 16:18
Спасибо за всевозможные варианты полезного скрипта (с технической стороны) ) Интересный с точки зрения механики, но пользователями может восприниматься как то что сайт желает вас обчистить и доверие сразу в 0 )
А то в тему вспоминается такой магазинчик с похожими накрутками лейдингов. Смотришь в верхнем углу - такой такой купил товар через пару секунд опять. Залезаешь в код а там... вереница покупателей прописана в коде и просто выводятся в отведенное время на сайте. Как такому сайту не доверить свой кошелек ))
  • 1
Дима
25.04 в 17:09
Все гениальное, просто:) Спасибо!
  • 1
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария