滾動上的CSS背景模糊

我修復了背景圖片，並且滾動時我希望圖片變得模糊。我知道如何在CSS中進行模糊處理，但是在特定的滾動位置處進行。滾動上的CSS背景模糊

下面是一個例子： https://medium.com/good-music/f160ba9e6c52

任何想法，示例代碼段的建議會有所幫助。

謝謝

來源

2013-12-20 user1328229

所以你想要做同樣的給定鏈接？顯示爲你到目前爲止所做的。 – Khamidulla

http://codepen.io/jiserra/pen/JzKpx –

@antindexer這裏是一個圖像模糊的例子。 http://demosthenes.info/blog/534/Crossbrowser-Image-Blur – user1328229

我只提到你如何獲得與滾動的位置。

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

對於IE，歌劇以前的綁定將無法工作，所以你需要

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

希望這可以幫助。乾杯。

來源

2013-12-20 06:16:33 shana

此codepen正是你想要的。考慮到瀏覽器的支持，它使用2個圖像雖然不是模糊：

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

來源

2014-01-22 11:13:28 user3223209

可以相對於你多遠滾動元素模糊。

$(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小於450像素從窗口的頂部，類blur將被添加到它。你的模糊類將看起來像這樣：

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

你可能想要使用它的過渡。不要忘記供應商前綴。

來源

2014-07-31 18:09:51

在您的網站示例（https://medium.com/good-music/f160ba9e6c52）有無CSS「模糊」效果。

你可以找到一個正常的圖像：3210 * THFG10B56f4TQOebO1Zd_w.jpeg

而模糊的圖像：https://d262ilb51hltx0.cloudfront.net/max/1440/gradv/29/81/40/darken/45/blur/20/1 * THFG10B56f4TQOebO1Zd_w.jpeg

疊加這兩個圖像後，你必須改變的第一個的不透明度，完成！

來源

2014-12-20 15:35:56

滾動上的CSS背景模糊

回答

相關問題