Размытие фона при прокрутке колесика мыши

Я имел в виду следующую ссылку, чтобы размыть фон при прокрутке мыши.

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 для работы?

Источник

2 ответа

Решение
<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)" })    
    }*

});


});
Источник

Это решение потребует отдельного элемента для фона, но использует 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>

Источник
Другие вопросы по тегам