Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен

Анимация увеличения чисел в Zero блоке

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация позволит добавить плавную анимацию увеличения чисел в Zero блоке до любого значения
Добавьте уникальность в Ваш проект
Для Вашего удобства в коде есть комментарии, чтобы Вы могли ориентироваться и менять все так, как хотите.
Обратите внимание, что данный эффект будет работать как на мобильной версии сайта, так и на десктоп версии сайта. Данная модификация не замедляет скорость загрузки сайта и не нагружает устройства пользователей.
Как это выглядит?
900
900
900
Как это добавить?
Первый шаг
Создаем Zero блок. В него добавляем необходимую информацию и отдельно добавляем текст с цифрой, присваивая ему CSS класс - num-up1
Второй шаг
Создаем блок T123 и помещаем код на страницу, где необходимо применить модификацию.

<!--Взято с сайта https://digistudio.su//animaciya-chisel-v-zero-bloke-->

<script> 
$(document).ready(function(){
    
	$(function () { 
	    let elArr = [
	        'num-up1',  //Класс элемента
	        900,         //Конечное число
	        '+',       //Подпись после числа
	        300,        //Дистанция до срабатывания
	        6000        //Скорость анимации в миллисекундах
	        ];
		let target_block = $('.'+elArr[0]+' .tn-atom');let blockStatus = true;  
		$(window).scroll(function() { 
			let scrollEvent = ($(window).scrollTop() > ($(target_block).offset().top - $(window).height() + elArr[3] )); 
			if(scrollEvent && blockStatus) { blockStatus = false; 
					$({numberValue: 0}).animate({numberValue: elArr[1]}, { 
					duration: elArr[4], easing: "swing", 
					step: function(val) { 
						target_block.html(String(Math.ceil(val)).replace(/(\d)(?=(\d{3})+([^\d]|$))/g, '$1 ') +' '+elArr[2]); 
					}
				}); 
			} 
		}); 
	});	
});	
</script>
Как Вам модификация?
Попробуйте наши модификации по пробному тарифу на 2 недели за 99 рублей.
Смотрите также
    Made on
    Tilda