如何模糊滚动图像？

Question

你们目前正在开发这个网站，几乎完成了，但是我目前正在模拟具有2张图像和不透明度的模糊效果，因此用户在滚动时会认为图像模糊。 但是我认为效果还不够好，CSS3模糊会完全降低网站速度。

这是到目前为止我尝试过的。

的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

这是一个主意-

使用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);
    })
})