在滚动的CSS背景迷离

Question

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

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

任何想法,例子,片段的建议都会有所帮助.

谢谢

Answer 1

这个codepen完全符合你的要求.考虑到浏览器支持,它使用2个图像而不是模糊:

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

Answer 2

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

$('#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之前的bind将不起作用，所以你需要

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

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