スクロールでCSSの背景がぼやけます

Question

私は背景画像を固定しており、スクロールすると画像がぼやけてしまいます。私はCSSでぼかしを行う方法を知っているが、特定のスクロール位置でそれを行う。ここで

は一例です： https://medium.com/good-music/f160ba9e6c52

任意の考え、例、スニペットのアドバイスが参考になります。

おかげ

Answer 1

私はあなたがスクロールして位置を取得することができますどのように言及しています。 IEの場合

$('#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 
}); 

あなたは

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

に必要なので、オペラ座前のバインドは、動作しません、これは役立つかもしれない希望。 乾杯！

Answer 2

このcodepenは、まさにあなたが望むものです。あなたがスクロールしてきたどのくらいの相対要素をぼかすことができ

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

Answer 3

：心の中でブラウザのサポートで、それは代わりに、ぼかしのかの2枚の画像を使用しています。

$(window).scroll(function(e) { 

    var distanceScrolled = $(this).scrollTop(); 

    $('.element').css('-webkit-filter', 'blur('+distanceScrolled/60+'px)'); 

}); 

ここで私は、ウィンドウがスクロールしたピクセルの量を得るためにscrollTop()を使用しています、そして私は、私が取得することを選んだだけの任意の数である60で割ったその数に要素の上にぼかしを設定しますぼくは欲しかった。

ある時点でぼかしを追加する場合は、DOM上の要素を使用して、その要素をウィンドウに対して相対的に確認できます。

$(window).scroll(function(e) { 

    var elOffset = $('.element').scrollTop() - $(window).scrollTop(); 

    if(elOffset < 450) { 
     $(this).addClass('blur'); 
    } 

}); 

.elementは、ウィンドウの上部から未満450pxの場合、クラスblurはそれに追加されます。あなたのぼかしクラスは次のようになります：

.blur { 
    -webkit-filter: blur(4px); 
} 

あなたはおそらくそれを使ってトランジションを使いたいでしょう。ベンダーの接頭辞を忘れないでください。

Answer 4

あなたのウェブサイトの例（https://medium.com/good-music/f160ba9e6c52）には、の「ぼかし」効果はありません。

あなたは1枚の通常の画像を見つけることができます：​​3210 * THFG10B56f4TQOebO1Zd_w.jpeg

そして、ぼやけた画像：https://d262ilb51hltx0.cloudfront.net/max/1440/gradv/29/81/40/darken/45/blur/20/1 * THFG10B56f4TQOebO1Zd_w.jpeg

これら2枚の画像を重ね合わせた後に、あなたは最初のものの不透明度を変更する必要があります、 完了しました！