javascript - 如何模糊滚动上的图像？

Question

伙计们，我目前正在开发这个 site它几乎完成了，但我目前正在模拟具有 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

这是一个想法-

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