hair salon . barbershop
SELF CONFIDENCE . GROOMING . LIFE STYLE
WELCOME TO BARBER HAIR SALON AND BARBERSHOP GROOMING LIFE STYLE AND SELF CONFIDNCE

We create new business approach
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen
book galley of type and scrambled .
Visit Our Online Shop
WELCOME TO BARBER HAIR SALON AND BARBERSHOP GROOMING LIFE STYLE AND SELF CONFIDNCE

We create new business approach
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen
book galley of type and scrambled .
Our price
Complimentary Beverage With Every Service
50
SIGNATURE HOTESHAVE
158
DELUXE TREATMENT
19 000
RAZOR SHAVE

Как сделать плавный рост значения чисел в блоке FR501 при попадании в зону видимости для Tilda

Анимируем все три цифры при прокрутки сайта до нужного уровня.

Скрипт вставляем в блок ДРУГОЕ►T123
<script> 
    //Добавляем класс к первой цифре
    $(".t506__title:eq(0)").addClass("numberup");
    //Добавляем класс ко второй цифре
    $(".t506__title:eq(1)").addClass("numberup1");
    //Добавляем класс к третьей цифре
    $(".t506__title:eq(2)").addClass("numberup2");

	$(function () { 
		var target_block = $(".numberup"); // Ищем блок 
		var blockStatus = true;  
		$(window).scroll(function() { 
			var scrollEvent = ($(window).scrollTop() > ($(target_block).offset().top - $(window).height())); 
		
			if(scrollEvent && blockStatus) {  
				blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы. 
			    //Анимация цифры 1
				$({numberValue: 0}).animate({numberValue: 50}, { 
					duration: 3000, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
					easing: "swing", 
					step: function(val) {  
						$(".numberup").html(Math.ceil(val)+'$'); // Блок, где необходимо сделать анимацию 
					} 
				}); 
				//Анимация цифры 2
				$({numberValue: 0}).animate({numberValue: 158}, { 
					duration: 3000, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
					easing: "swing", 
					step: function(val) {  
						$(".numberup1").html(Math.ceil(val)+'$'); // Блок, где необходимо сделать анимацию 
					} 
				}); 
				//Анимация цифры 3
					$({numberValue: 0}).animate({numberValue: 1900}, { 
					duration: 3000, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
					easing: "swing", 
					step: function(val) { 
					    var numpsace = Math.ceil(val);
					    var format = String(numpsace).replace(/(\d)(?=(\d{3})+([^\d]|$))/g, '$1 ');
						$(".numberup2").html(format +'ms'); // Блок, где необходимо сделать анимацию 
					} 
				}); 
			} 
		}); 
	}); 
</script> 
<style>
/*Редактируем размер цифр для разных разрешений*/    
.t506 .t-title_xl {
    font-size: 80px !important;
   
}    

@media screen and (max-width: 1200px){
.t506 .t-title_xl {
    font-size: 65px !important;
   
}}

@media screen and (max-width: 640px){
.t506 .t-title_xl {
    font-size: 28px !important;
   
}}

@media screen and (max-width: 480px){
.t506 .t-title_xl {
    font-size: 24px !important;
   
}}
    
    
</style>
Made on
Tilda