如何模糊滚动图像？

Question

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

这是一个想法-

使用vacuum.js。它是开源的并且有很棒的文档。

使用此代码示例：https://codepen.io/GianlucaGuarini/pen/DwdzEo

但是，通过单击以更改模糊的按钮来更改其示例：

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

到 jquery 窗口滚动侦听器，以便当用户滚动时图像变得模糊，当滚动停止时图像再次清晰（或者无论您想要做什么）。这是一个粗略的想法：

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