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

Question

[Nik_1011]

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

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


Использовал следующий код

$(".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) Есть ли у вас альтернативные варианты?

Comments

[Nik_1011]

Вот откуда взял решение с blur , в самом конце первого ответа наиболее актуальная версия решения,первая версия устарела.

Answer 1

[tyoma_koder]

можно анимации на чистом css делать с помощью keyframes