Профессиональная поддержка сайтов: разработка, дизайн, тексты, SEO и прочее от 500 Р   •   Реклама
18 458 просм
45 комм
Поделиться:

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

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

45
комментариев
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Администратор  |  724

Владимир Ершов, Если он находится рядом с теми же блоками - то да.

21.10 в 21:46
  • 0
Проверенный  |  8

УРАААААА !!!! ЗАРАБООООТААЛААААА !!! Артём Вы супер !!! Огромное спасибо, я так понимаю, если заказчик захочет добавить блок, то нуна добавить по строчке в "использование" ?

21.10 в 19:28
  • 0
Администратор  |  724

Владимир Ершов, с учетом Вашей верстки, вызов будет такой:

$(document).ready(function() {

	animate_number(".s5_row .s5_box:nth-of-type(1) .cifra", ".s5_row .s5_box:nth-of-type(1) .cifra_finish", 5000);
	animate_number(".s5_row .s5_box:nth-of-type(2) .cifra", ".s5_row .s5_box:nth-of-type(2) .cifra_finish", 5000);
	animate_number(".s5_row .s5_box:nth-of-type(3) .cifra", ".s5_row .s5_box:nth-of-type(3) .cifra_finish", 5000);
	animate_number(".s5_row .s5_box:nth-of-type(4) .cifra", ".s5_row .s5_box:nth-of-type(4) .cifra_finish", 5000);

}); 

$(window).scroll(function() {

	animate_number(".s5_row .s5_box:nth-of-type(1) .cifra", ".s5_row .s5_box:nth-of-type(1) .cifra_finish", 5000);
	animate_number(".s5_row .s5_box:nth-of-type(2) .cifra", ".s5_row .s5_box:nth-of-type(2) .cifra_finish", 5000);
	animate_number(".s5_row .s5_box:nth-of-type(3) .cifra", ".s5_row .s5_box:nth-of-type(3) .cifra_finish", 5000);
	animate_number(".s5_row .s5_box:nth-of-type(4) .cifra", ".s5_row .s5_box:nth-of-type(4) .cifra_finish", 5000);
	  
});

И Вы с ошибкой вставили функцию (смотрите консоль).

21.10 в 19:18
  • 0
Проверенный  |  8

разобрался как код нормально отправить, извиняюсь за прошлые разы ...

<script>
	
	function animate_number(result_block, get_number, duration_number) {
			
		if(($(window).scrollTop() > ($(result_block).position().top - $(window).height())) && ($(get_number).text() !== $(result_block).text()) && ($(result_block).text() === 0 || $(result_block).text() === "")) {

			$({numberValue: 0}).animate({numberValue: $(get_number).text()}, {

				duration: duration_number,
				easing: "linear",

				step: function(val) {

					$(result_block).html(Math.ceil(val));

				}

			});

		}
		
	}
	$(document).ready(function() {

		animate_number(".cifra", ".cifra_finish", 5000);
		animate_number(".cifra_1", ".cifra_finish", 5000);

	}); 

	$(window).scroll(function() {
	  
		animate_number(".cifra", ".cifra_finish", 5000);
		animate_number(".cifra_1", ".cifra_finish", 5000);
	  
	});
	
</script>
21.10 в 17:25
  • 0
Проверенный  |  8

результат тот же, сама анимация работает, там в данный момент 4 блока через f_loop, в них 4 значения, 50-60-70-80, результат берётся из класса cifra_finish у которого display: none; выводится всё в класс cifra, скрипт работает до первого значения 50, дальше останавливается со значением 50607080 во всех блоках.

Может я что то не так делаю ? вставил всё в FOOTER

http://cafe-corretto.ershovincorp.ru/

<script>

function animate_number(result_block, get_number, duration_number) {

if(($(window).scrollTop() > ($(result_block).position().top - $(window).height())) && ($(get_number).text() !== $(result_block).text()) && ($(result_block).text() === 0 || $(result_block).text() === "")) {

$({numberValue: 0}).animate({numberValue: $(get_number).text()}, {

duration: duration_number,

easing: "linear",

step: function(val) {

$(result_block).html(Math.ceil(val));

}

});

}

}

$(document).ready(function() {

animate_number(".cifra", ".cifra_finish", 5000);

animate_number(".cifra_1", ".cifra_finish", 5000);

});

$(window).scroll(function() {

animate_number(".cifra", ".cifra_finish", 5000);

animate_number(".cifra_1", ".cifra_finish", 5000);

});

</script>

21.10 в 17:10
  • 0
Администратор  |  724

Владимир Ершов, я вижу такой вариант решения.

Функция:

function animate_number(result_block, get_number, duration_number) {
		
	if(($(window).scrollTop() > ($(result_block).position().top - $(window).height())) && ($(get_number).text() !== $(result_block).text()) && ($(result_block).text() === 0 || $(result_block).text() === "")) {

		$({numberValue: 0}).animate({numberValue: $(get_number).text()}, {

			duration: duration_number,
			easing: "linear",

			step: function(val) {

				$(result_block).html(Math.ceil(val));

			}

		});

	}
	
}

Использование:

$(document).ready(function() {

	animate_number(".result", ".fin", 5000);
	animate_number(".result_1", ".fin", 5000);

}); 

$(window).scroll(function() {
  
	animate_number(".result", ".fin", 5000);
	animate_number(".result_1", ".fin", 5000);
  
});

Где .result - куда выводим результат, .fin - откуда берем финальное значение, 5000 - скорость анимации.

21.10 в 15:37
  • 0
Проверенный  |  8

Артем Мáлков, "Чтобы 1 скрипт можно было использовать на нескольких разных элементах?" Да, ищу решение чтобы можно было использовать скрипт в "повторителе" элементов на WP c плагином ACF через метку f_loop. Иначе блок будет не гибкий, ограниченный, а элементов может быть много, сколько нужно заказчику, проблема в том что копируемые элементы наследуют класс первого элемента, НО "начальное число" у всех разное, оно настраиваемое в каждом копируемом элементе, но класс элемента наследуется у первого. И вот не знаю, можно ли решить данную задачу в принципе или я зря мучаюсь.

21.10 в 08:07
  • 0
Администратор  |  724

Егор, здравствуйте. Вопрос не по теме статьи. Почитайте про FancyBox. Возможно он решит Вашу задачу.

Владимир Ершов, не совсем понял про это: есть ли какое решение с повторителем что бы значения работали корректно согласно своего поля.

Чтобы 1 скрипт можно было использовать на нескольких разных элементах?

20.10 в 23:51
  • 0
Проверенный  |  8

Всё, разобрался, но работает вот так http://cafe-corretto.ershovincorp.ru соответственно вопрос: есть ли какое решение с повторителем что бы значения работали корректно согласно своего поля ?

вот такой скрипт использую:

<script>

$(function() {

var target_block = $(".cifra"); // Ищем блок

var blockStatus = true;

var numb_finish = $(".cifra_finish").text(); // Получаем конечное число

$(window).scroll(function() {

var scrollEvent = ($(window).scrollTop() > (target_block.position().top - $(window).height()));

if(scrollEvent && blockStatus) {

blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы.

$({numberValue: 0}).animate({numberValue: numb_finish}, {

duration: 5000, // Продолжительность анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд

easing: "linear",

step: function(val) {

$(".cifra").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию

}

});

}

});

});

</script>

20.10 в 20:04
  • 0
Пользователь  |  8

Добрый вечер! Можете мне помочь мучаюсь уже целый день с самой ночи такая проблема: Хочу сделать что при нажатии на кадры фильма в новости. Кадр увеличивался и можно было щёлкать!

Как можно это реализовать? Пытался через код - <a href="{xfimagelarge-1}" rel="highslide" class="highslide"><img src="{poster src='{xfimagelarge-1}' width='187' height='143'}" alt='{title}' title='{title}' /></a>

- Не работает! Может и работает, но у меня выдаёт "Загрузка" бесконечная кадра.

Ссылка тут я со скриншотами описал: https://clck.ru/JaiD7

Готов даже вам доступ открыть дать: логин и пароль! (Очень важно для меня функция. Но не могу сделать)

20.10 в 19:02
  • 0
Проверенный  |  8

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

20.10 в 18:56
  • 0
Проверенный  |  8

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

<script>

$(function() {

var numb_finish = $(".price_finish").text(); // Получаем конечное число

$(window).scroll(function() {

var scrollEvent = ($(window).scrollTop() > (target_block.position().top - $(window).height()));

if(scrollEvent && blockStatus) {

blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы.

$({numberValue: 0}).animate({numberValue: numb_finish}, {

duration: 500, // Продолжительность анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд

easing: "linear",

step: function(val) {

$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию

}

});

}

});

});

</script>

20.10 в 18:44
  • 0
Администратор  |  724

Владимир Ершов, Здравствуйте. Не в последнем, а в предпоследнем.

Попробуйте так:

<script>

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

.price_finish - класс откуда брать конечное число.

20.10 в 18:20
  • 0
Проверенный  |  8

Здравствуйте, у Вас в последнем скрипте есть возможность ставить НАЧАЛЬНУЮ цифру с блока с которой начинается отсчет, а ка сделать что бы начало было по умолчанию с 0, а вот КОНЕЧНАЯ бралсь из блока ?

<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>

20.10 в 16:07
  • 0
Администратор  |  724

Игорь Герасименуо, здравствуйте.

Для каждого блока свой скрипт.

18.07 в 14:51
  • 0
Пользователь  |  1

Здравствуете,у меня такой вопрос если в блоках разные числа то надо разные классы прописывать для получения ихнего числа?

18.07 в 13:17
  • 0
Администратор  |  724

Артур, здравствуйте.

Используйте функцию:

function numb_anim(start, finish, dur, el) {

$({numberValue: start}).animate({numberValue: finish}, {

duration: dur,

easing: "linear",

step: function(val) {

$(el).html(Math.ceil(val));

}

});

}

Пример вызова:

numb_anim(0, 1000, 500, ".price");

0 - стартовое значение.

1000 - конечное.

500 - Продолжительность анимации.

".price" - элемент, где показываем результат.

8.05 в 02:01
  • 0
Пользователь  |  1

Здравствуйте. Спасибо за скрипт. Как проще нескольким цифрам добавить эту функцию. Можно пример пожалуйста. Разным классам разные значения

8.05 в 01:16
  • 0
Администратор  |  724

Павел Клевцов, не совсем понял. Поясните.

29.12 в 02:18
  • 0
Пользователь  |  1

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

29.12 в 01:20
  • 0
Гости  |  679

и почему то не работает "родная" анимация чисел на сайте, хотя её код вообще не трогал

13.10 в 21:29
  • 0
Гости  |  679

да самое интересное, что скрипт работал, но цифры крутились сразу без скрола, потом удалил - поставил и вообще не заводится

13.10 в 21:18
  • 0
Администратор  |  724

Олег, если вкратце - удалите снизу сайта файл script.js и всего скорее скрипт анимации заработает. Если действительно заработает - то исправляйте ошибки в этом файле, для того чтобы использовать его и скрипт анимации чисел.

13.10 в 20:45
  • 0
Гости  |  679

так он после и стоит

может есть более оперативный способ общения?)

13.10 в 20:21
  • 0
Администратор  |  724

Олег, нельзя ставить скрипт выше блока. Поставьте после него.

13.10 в 20:18
  • 0
Гости  |  679

не помогло((

13.10 в 18:52
  • 0
Администратор  |  724

Олег, у вас там ошибка в скрипте (не в моем, а в файле script.js). Поставьте скрипт из статьи вверх файла, или же вынесите его на страницу и проблемы должны решиться.

13.10 в 18:35
  • 0
Гости  |  679

сейчас уже чет вообще не крутятся

13.10 в 17:13
  • 0
Администратор  |  724

Олег, покажите сайт где используется скрипт.

13.10 в 14:27
  • 0
Гости  |  679

Анимация срабатывает сразу после загрузки страницы, а не при отображении блоки с числом на экране. в чем может быть причина?

$(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)); // Блок, где необходимо сделать анимацию

}

});

}

});

});

13.10 в 14:12
  • 0
Администратор  |  724

Айбек, попробуйте так:

<script>

$(function () {

var counter = 0;

$('#test').click(function() {

counter++;

if(counter == 1) {

$({numberValue: 0}).animate({numberValue: 1}, {

duration: 500, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд

easing: "linear",

step: function(val) {

$(".price").html((Math.round(val * 100) / 100 )); // Блок, где необходимо сделать анимацию

}

});

}

if(counter == 2) {

$({numberValue: 1}).animate({numberValue: 1.89}, {

duration: 500, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд

easing: "linear",

step: function(val) {

$(".price").html((Math.round(val * 100) / 100 )); // Блок, где необходимо сделать анимацию

}

});

}

});

});

</script>

.price - куда выводим результат

#test - ссылка для запуска

27.07 в 02:08
  • 0
Гости  |  679

пожалуйста помогите, как сделать чтоб, при нажатии на кнопку началось анимация, к примеру с 0 до 1, потом еще раз нажал и получилось с 1 до 1.89, и все это без перезагрузки страницы.

Буду ооооооооочень благодарен!

Спасибо...

24.07 в 15:05
  • 3
Гости  |  679

Уважаемый Артем!

Ваша редакция скрипта работает!!

Просто надо было поместить скрипт ПОСЛЕ ТАБЛИЦЫ!!!!

С уважением Фридрих

13.07 в 09:58
  • 0
Гости  |  679

Уважаемый Артем! Спасибо за быстрый ответ.

Этот предложенный Вами скрипт почему-то у меня не работает, Анимации нет, показывает 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));

}

});

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

С уважением Фридрих

13.07 в 07:27
  • 0
Администратор  |  724

Фридрих, да.

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

$({numberValue: 0}).animate({numberValue: last}, {

13.07 в 00:03
  • 0
Гости  |  679

Возможно ли вместо того, чтобы вставлять вручную число 1000 (конец анимации) автоматически вставлять это число из ячейки таблицы ("table tr:last-child th:first-child")

12.07 в 18:46
  • 1
Администратор  |  724

Влад, то есть остановить? Она останавливается когда число доходит до конечного указанного.

30.06 в 23:39
  • 0
Гости  |  679

Здравствуйте, подскажите как остановить анимацию?

26.06 в 19:00
  • 0
Администратор  |  724

Фридрих, Если Вы внимательно читали статью, то могли заметить в нем параграф начинающийся со слов "Обратите внимание", который и дает ответ на ваш вопрос. smiley

2.06 в 13:06
  • 0
Гости  |  679

а как сделать не увеличение а уменьшение price , например, с 50 до 5, что надо изменить в скрипте

2.06 в 12:43
  • 2
Гости  |  679

Все гениальное, просто:) Спасибо!

25.04 в 17:09
  • 2
Гости  |  679

Спасибо за всевозможные варианты полезного скрипта (с технической стороны) ) Интересный с точки зрения механики, но пользователями может восприниматься как то что сайт желает вас обчистить и доверие сразу в 0 )

А то в тему вспоминается такой магазинчик с похожими накрутками лейдингов. Смотришь в верхнем углу - такой такой купил товар через пару секунд опять. Залезаешь в код а там... вереница покупателей прописана в коде и просто выводятся в отведенное время на сайте. Как такому сайту не доверить свой кошелек ))

22.04 в 16:18
  • 1
Администратор  |  724

Марат, надеюсь этот способ вам поможет.

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

<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>

27.01 в 03:05
  • 8
Гости  |  679

Отличный короткий скриптик, только не могу переделать его под себя :-( У меня число с ведущими нулями. Т. е., мне надо, чтобы циферки бежали так:

00001

00002

00003

.....

00010

.........

00100

.........

09999

10000

27.01 в 01:38
  • 0
Администратор  |  724

Виктор, Здравствуйте!

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

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

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

11.11 в 02:58
  • 6
Гости  |  679

Здравствуйте! Хочу реализовать уменьшение скидки до того пока человек не отправит форму. И чтобы сама скидка тоже отправлялась на почту. Подскажите как это можно сделать?

7.11 в 15:33
  • 0
Подняться наверх
«Pandoge» - помощник веб-мастера