滚动时CSS背景模糊化

Question

我有一个固定背景图片，想要在滚动时使该图片模糊。我知道如何使用CSS来模糊图片，但是希望在特定的滚动位置实现这个效果。

以下是一个示例: https://medium.com/good-music/f160ba9e6c52 如果你有任何想法、示例或建议，都会很有帮助。

谢谢。

- user1328229

---

所以你想做和给定链接一样的事情？请展示一下你目前为止做了什么。 - Khamidulla

http://codepen.io/jiserra/pen/JzKpx - Amarnath Balasubramanian

@antindexer 这里有一个图片模糊的例子。http://demosthenes.info/blog/534/Crossbrowser-Image-Blur - user1328229

Answer 1

这个codepen正好满足您的需求。考虑到浏览器支持，它使用了2张图片代替模糊效果： http://codepen.io/sota0805/pen/pqLcv

- user3223209

Answer 2

您可以根据滚动的距离来模糊元素。

    $(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不足450px，则会向其添加类blur。你的模糊类看起来可能是这样的：

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

你可能想要使用过渡效果。不要忘记添加厂商前缀。

- Michael Lynch

Answer 3

在您的网站示例（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

在叠加这两张图片后，您需要更改第一张图片的不透明度，完成了！

- Damien Romito

Answer 4

我只是提到了如何通过滚动获取位置。

$('#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     
   });

希望这可以帮助到你。 祝好！

- Shanaka Rathnayaka