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 .
Professional Skills
The best way to improve your professional skills and increase your value
  • 45%
    SKETCH
    1 year
  • 100%
    ADOBE ILLUSTRATOR
    3 years
  • 65%
    MOBILE UI
    2 years

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

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

В коде меняем 509236625 на номер ID вашего блока FR405

Скрипт вставляем в блок ДРУГОЕ►T123

<script> 
    //Добавляем класс к первой цифре
    $(".t1051__number:eq(0)").addClass("numberup3");
    //Добавляем класс ко второй цифре
    $(".t1051__number:eq(1)").addClass("numberup4");
    //Добавляем класс к третьей цифре
    $(".t1051__number:eq(2)").addClass("numberup5");

	$(function () { 
		var target_block = $(".numberup3"); // Ищем блок 
		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: 45}, { 
					duration: 3000, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
					easing: "swing", 
					step: function(val) {  
						$(".numberup3").html(Math.ceil(val)+"%"); // Блок, где необходимо сделать анимацию 
						$('.t1051__pie1').attr('data-number' , Math.ceil(val) );
						
					    
					    
					} 
				}); 

				//Анимация цифры 2
				$({numberValue: 0}).animate({numberValue: 100}, { 
					duration: 3000, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
					easing: "swing", 
					step: function(val) {  
						$(".numberup4").html(Math.ceil(val)+"%"); // Блок, где необходимо сделать анимацию 
						$('.t1051__pie2').attr('data-number' , Math.ceil(val) );


					} 
				}); 
				//Анимация цифры 3
					$({numberValue: 0}).animate({numberValue: 65}, { 
					duration: 3000, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
					easing: "swing", 
					step: function(val) {  
						$(".numberup5").html(Math.ceil(val)+"%"); // Блок, где необходимо сделать анимацию 
						$('.t1051__pie3').attr('data-number' , Math.ceil(val) );
						t1051__createPieChart('509236625', '#ededed', '#1c0c04', '#cccccc', '15', '160');
					} 
				}); 
			} 
		}); 
	}); 
</script> 
Made on
Tilda