Question

我有固定的背景图像，在滚动时我希望图像变得模糊。我知道如何在CSS中进行模糊，但是在特定的滚动位置进行模糊。

这是一个例子： https://medium.com/good-music/f160ba9e6c52

任何关于片段的想法，例子和建议都会有所帮助。

由于

Answer 1

这个codepen完全符合您的要求。考虑到浏览器支持，它使用2个图像，而不是模糊：

http://codepen.io/sota0805/pen/pqLcv

Answer 2

在您的网站示例（https://medium.com/good-music/f160ba9e6c52）上，没有css“模糊”效果。

您可以找到一张普通图片：https://d262ilb51hltx0.cloudfront.net/max/1440/1 * THFG10B56f4TQOebO1Zd_w.jpeg

图像模糊：https://d262ilb51hltx0.cloudfront.net/max/1440/gradv/29/81/40/darken/45/blur/20/1 * THFG10B56f4TQOebO1Zd_w.jpeg

在叠加这两个图像后，你必须改变第一个图像的不透明度，它就完成了！

Answer 3

我只提到了如何通过滚动来获得位置。

$('#divscroll').bind('mousewheel', function (e) {
     var toTop = $(window).scrollTop(); 
     //from this you can get the distance from the top 
     //then you can blur the image as you want with relevent to the position of ur image
});

对于IE，Opera以前的绑定不起作用，所以你需要

 $('#divscroll').bind('DOMMouseScroll', function (e) {
       var toTop = $(window).scrollTop(); 
       //Handle your logic     
   });

希望这可能会有所帮助。干杯！

Answer 4

您可以相对于您滚动的距离来模糊元素。

$(window).scroll(function(e) {

    var distanceScrolled = $(this).scrollTop();

    $('.element').css('-webkit-filter', 'blur('+distanceScrolled/60+'px)');

});

这里我使用scrollTop()来获取窗口滚动的像素数量，然后我将元素上的模糊设置为该数字除以60，这只是我选择获取的数字的任意数字模糊我想要。

如果要在某个点添加模糊，可以使用DOM上的元素并检查它相对于窗口的位置。

$(window).scroll(function(e) {

    var elOffset = $('.element').scrollTop() - $(window).scrollTop();

    if(elOffset < 450) {
        $(this).addClass('blur');
    }

});

如果.element距离窗口顶部小于450像素，则会将blur类添加到其中。你的模糊类看起来像这样：

.blur {
    -webkit-filter: blur(4px);
}

您可能希望使用它进行转换。别忘了供应商的前缀。

在滚动的CSS背景迷离

4 个答案: