Заявка на проект
Заполните поля и мы свяжемся с Вами в течение дня!
Меня интересует
Вы также можете позвонить нам лично +7(905)076-20-31
Lite change
Анимация чисел в блоках "О нас в цифрах" FR405 Диаграмма
Professional skills
It is the best way to improve your professional skills and become more valued
45%
SKETCH
1 year
100%
ADOBE ILLUSTRATOR
3 years
65%
MOBILE UI
2 years
<script> 
    //Добавляем класс к первой цифре
    $(".t505__number:eq(0)").addClass("numberup1");
    //Добавляем класс ко второй цифре
    $(".t505__number:eq(1)").addClass("numberup2");
    //Добавляем класс к третьей цифре
    $(".t505__number:eq(2)").addClass("numberup3");

	$(function () { 
		var target_block = $(".numberup1"); // Ищем блок 
		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: 55}, { 
					duration: 3000, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
					easing: "swing", 
					step: function(val) {  
						$(".numberup1").html(Math.ceil(val)+"%"); // Блок, где необходимо сделать анимацию 
						t505__createPieChart('63021817', Math.ceil(val) ,Math.ceil(val)+12, Math.ceil(val)+31 ,'','#ededed','#0011ff','#fff','3','15','160');
					} 
				}); 

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


					} 
				}); 
				//Анимация цифры 3
					$({numberValue: 0}).animate({numberValue: 86}, { 
					duration: 3000, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
					easing: "swing", 
					step: function(val) {  
						$(".numberup3").html(Math.ceil(val)+"%"); // Блок, где необходимо сделать анимацию 
					} 
				}); 
			} 
		}); 
	}); 
</script> 
Важно!
  1. Строчка 23 - ID63021817 меняем на свой
  2. Строчка 23 - #ededed цвет фона
  3. Строчка 23 - #0011ff цвет убывающей диаграммы
  4. Строчка 23 - #fff цвет возрастающей диаграммы
  5. Строчка 23 - 3 количество диаграмм
  6. Строчка 23 - 15 ширина диаграммы
  7. Строчка 23 - 160 диаметр диаграммы