1

伙计们，我目前正在开发这个网站，它几乎完成了，但我目前正在用 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});
4

1 回答 1

3

这是一个想法-

使用 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);
    })
})
于 2013-09-17T16:01:18.253 回答