鼠标滚轮滚动时模糊背景

Question

我指的是以下 link 来模糊鼠标滚动的背景。

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

代码如下：

HTML:

<div id="blurred-image-container">
    <div class="img-src" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/0*I7mXgSon9oco-rim.jpeg')"></div>
    <div class="img-src blurred-img" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>
</div>

<div class="article">
  <h1>Medium</h1>
</div>

CSS:

.img-src {
    position: fixed;
    background-position: center;
    -webkit-background-size: cover;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.blurred-img { opacity: 0; }

.article {
  width:500px;
  height: 2000px;
}

h1 {
  color: #fff;
  position: fixed;
  z-index: 9999;
  font-size: 50px;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -103px;
}

jQuery

$(window).scroll(function() {
    // Get scroll position
    var s = $(window).scrollTop(),
    // scroll value and opacity
    opacityVal = (s / 150.0);
    // opacity value 0% to 100%
    $('.blurred-img').css('opacity', opacityVal);
});

然后，需要虚化的背景图片不在页面的最顶部。我的网页比较长，需要虚化的背景在页面的最底部。

我认为以下代码试图设置页面顶部开始出现模糊的点。我认为在到达我想要模糊背景的部分之前，有超过 2000 像素需要向下滚动。

    var s = $(window).scrollTop(), opacityVal = (s / 150.0);

假设我的 html 文档如下所示：

<div id="firstdiv">
    <p>long text goes here....</p>
</div>
<div id="seconddiv">
    <p>long text goes here....</p>
</div>
<div id="thirddiv">
    <p>long text goes here....</p>
</div>
<div id="blurred-image-container">
    <div class="img-src" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/60/darken/25/0*I7mXgSon9oco-rim.jpeg')"></div>
    <div class="img-src blurred-img" style="background-image:url('https://d262ilb51hltx0.cloudfront.net/fit/c/1600/1280/gradv/29/81/40/darken/50/blur/50/0*I7mXgSon9oco-rim.jpeg')"></div>
</div>

<div class="article">
  <h1>Medium</h1>
</div>

当页面向下滚动到#blurred-image-container 部分时，我希望背景页面模糊。

我怎样才能修改 jQuery 来工作？

Answer 1

<div class="out">

</div>
<div class="in">

</div>

out {
    width: 100%;
    height: 800px;
    background: url('background') no-repeat;
}
.in {
    width: 100%;
    height: 200px;
    background-color:olive;
}  

 $(window).on('scroll', function () {
    var pixs = $(document).scrollTop()
    pixs = pixs / 100;

    var scroll;
    $(window).scroll(function (event) {
    scroll = $(window).scrollTop();
    console.log(scroll);
 *if(scroll>606)
    {
    $(".out").css({"-webkit-filter": "blur("+pixs+"px)","filter": "blur("+pixs+"px)" })    
    }*

});


});

Answer 2

此解决方案将需要一个单独的背景元素，但使用 SVG 过滤器允许在垂直方向上模拟运动模糊。

它计算上次滚动位置和当前滚动位置之间的差异，并将其用于模糊值。它也通过使用 requestAnimationFrame() 去抖动。也很容易采用支持水平模糊的单独值。

您可能想要调整模糊的比例和最大值，仅低于某些初始值。

var blur = document.getElementById("fltBlur");
var prevY = 0;
var reqId;

window.onscroll = function() {
  cancelAnimationFrame(reqId);
  reqId = requestAnimationFrame(motionBlur)
};

function motionBlur() {
  var y = window.scrollY;
  var n = Math.min(32, Math.abs(y - prevY));
  blur.setAttribute("stdDeviation" ,"0 " + n);
  prevY = y;
}

html, body {width:100%; height:300%}
#cont {
 width:100%;
 height:300%;
 background:url(//i.imgur.com/47zcWet.jpg);
 -webkit-filter: url(#svgBlur);
 filter: url("#svgBlur");
 }

<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur id="fltBlur" in="SourceGraphic" stdDeviation="0 0" />
  </filter>
</svg>
<div id=cont></div>

鼠标滚轮滚动时模糊背景

bluring background when mousewheel scrolling

html

javascript

css

jquery

blur