javascript - 鼠标滚轮滚动时模糊背景

Question

我指的是以下链接以模糊鼠标滚动的背景。

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)" })    
    }*

});


});