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);
});

然后，需要模糊的背景图片不在页面的最顶部。我的网页很长，需要模糊的背景位于页面的最底部。

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

    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>

当页面向下滚动到#fressed-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滤镜可以在垂直方向上模拟运动模糊。

它计算最后和当前滚动位置之间的差异，并将其用于模糊值。它也通过使用var $vid1 = <?php echo json_encode($code_1); ?>; var $vid2 = <?php echo json_encode($code_2); ?>; var videoIDs = [ $vid1, $vid2 ];进行辩护。它也很容易被采用来支持水平模糊的单独值。

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

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

鼠标滚轮滚动时的模糊背景

2 个答案: