Генератор CSS-свойства «border-radius»   •   Online-инструменты
12 246 просм
25 комм
Поделиться:

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

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

25
комментариев
Навигация:
1 2
Виктор
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
  • 6
Марат
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
Все гениальное, просто:) Спасибо!
  • 2
Фридрих
2.06 в 12:43
а как сделать не увеличение а уменьшение price , например, с 50 до 5, что надо изменить в скрипте
  • 2
Фридрих, Если Вы внимательно читали статью, то могли заметить в нем параграф начинающийся со слов "Обратите внимание", который и дает ответ на ваш вопрос. smiley
  • 0
Влад
26.06 в 19:00
Здравствуйте, подскажите как остановить анимацию?
  • 0
Влад, то есть остановить? Она останавливается когда число доходит до конечного указанного.
  • 0
Фридрих
12.07 в 18:46
Возможно ли вместо того, чтобы вставлять вручную число 1000 (конец анимации) автоматически вставлять это число из ячейки таблицы ("table tr:last-child th:first-child")
  • 1
Фридрих, да.

var last = $("table tr:last-child th:first-child").text();

$({numberValue: 0}).animate({numberValue: last}, {
  • 0
Фридрих
13.07 в 07:27
Уважаемый Артем! Спасибо за быстрый ответ.
Этот предложенный Вами скрипт почему-то у меня не работает, Анимации нет, показывает 0

var currentNumber = $('.number').text();
var last = $("table tr:last-child th:first-child").text();
$({numberValue: currentNumber}).animate({numberValue: last }, {
duration: 10000,
easing: 'linear',
step: function() {
$('.number').text(Math.ceil(this.numberValue));
}
});


А раньше все было великолепно!

С уважением Фридрих
  • 0
Фридрих
13.07 в 09:58
Уважаемый Артем!
Ваша редакция скрипта работает!!
Просто надо было поместить скрипт ПОСЛЕ ТАБЛИЦЫ!!!!
С уважением Фридрих
  • 0
Айбек
24.07 в 15:05
пожалуйста помогите, как сделать чтоб, при нажатии на кнопку началось анимация, к примеру с 0 до 1, потом еще раз нажал и получилось с 1 до 1.89, и все это без перезагрузки страницы.
Буду ооооооооочень благодарен!
Спасибо...
  • 2
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.