Как размыть изображение на свитке?

Question

Yo guys im в настоящее время разрабатывает этот site его почти законченный, но im в настоящее время имитирует эффект размытия с 2 изображениями и с непрозрачностью, поэтому пользователь будет думать, что изображение размывается при прокрутке. Но я не думаю, что эффект достаточно хорош, а размытие CSS3 полностью замедлит работу сайта.

Это то, что я пробовал до сих пор .. о, и, кстати, я использовал scrollorama для этого.

HTML

<div id="imgprinc1" data-0="top:0%" data-2200="top:-5%"></div> 
<div id="imgprinc2" data-0="top:0%" data-2200="top:-5%"></div> 

Imgprinc1 нормальное изображение, а следующий один является размытым изображением.

JS

scrollorama.animate('#imgprinc1',{delay:200,duration: 600, property:"opacity" , start:1 , end: 0}); 
scrollorama.animate('#imgprinc2',{delay:1800,duration: 500, property:"opacity" , start:1 , end: 0}); 

Answer 1

Вот idea-

Используйте vague.js. Его открытый источник и отличная документация.

http://codepen.io/GianlucaGuarini/pen/ynCBD 

Однако изменить свой пример с кнопки, щелчок, чтобы изменить размытие:

$(".btn").on("click",$.proxy(vague.toggleblur,vague)); 

в JQuery окно прокрутки слушателя, так что, когда прокручивать изображение становится размытым, и когда прокрутка останавливается она очищает (или, тем не менее, вы хотите это сделать). Вот приблизительная идея:

$(document).ready(function(){ 
    $(window).scroll(function(){ 
     $.proxy(vague.toggleblur,vague); 
    }) 
})