@Nik_1011

Как сделать blur-эффект для чисел?

Здравствуйте.

Задача сделать подобный blur-эффект для чисел.
6038a2a33b158046420460.png

Использовал следующий код
$(".s-adv-2").waypoint(function(){

// .s-adv-2 - название секции
// .s-adv-item h3 span - здесь находится число, к которому применяется blur и animateNumber
// Generic function to set blur radius of $ele
	var setBlur = function(ele, radius) {
					$(ele).css({
						 "-webkit-filter": "blur("+radius+"px)",
							"filter": "blur("+radius+"px)"
				 });
		 },
		 
		 // Generic function to tween blur radius
		 tweenBlur = function(ele, startRadius, endRadius) {
					$({blurRadius: startRadius}).animate({blurRadius: endRadius}, {
							duration: 2000,
							easing: 'swing', // or "linear"
							// use jQuery UI or Easing plugin for more options
							step: function() {
									setBlur(ele, this.blurRadius);
							},
							complete: function() {
									// Final callback to set the target blur radius
									// jQuery might not reach the end value
									setBlur(ele, endRadius);
						 }
				 });
			};

	var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(' ');
		$(".s-adv-item h3 span").each(function() {
			var tcount = $(this).data("count");
			$(this).animateNumber({ number: tcount,
				easing: 'easeInQuad',
				"font-size": "48px",
				numberStep: comma_separator_number_step},
				2000);
		});

		
	// Start tweening towards blurred image
	tweenBlur('.s-adv-item h3 span', 0, 10);
	
	// Reverse tweening 
	tweenBlur('.s-adv-item h3 span', 10, 0);

		$(this).waypoint("destroy");

	

	},{

		offset: '75%'

	});


Впринципе работает, но blur через раз, так в конце еще и подпрыгивает как бы на 0,1 секунды.

Вопросы:
1) Как вам такой способ решения задачи?
2) Есть ли у вас альтернативные варианты?
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
tyoma_koder
@tyoma_koder
можно анимации на чистом css делать с помощью keyframes
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы