Question

哟伙计们我目前正在开发这个site它差不多完成了，但我目前正在用2个图像和不透明度模拟模糊效果，因此用户会认为当你滚动时图像模糊。但我不认为效果足够好，CSS3模糊将完全放慢网站的速度。

这就是我到目前为止所尝试的..哦，顺便说一句，我使用了scrolllorama。

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

如何在滚动上模糊图像？

1 个答案: