動態標頭模糊過濾器

Question

我有一個固定的標題，我想添加一個動態模糊，因爲用戶向下滾動頁面。我瞭解到filter: blur(10px)僅適用於應用div中的元素。有人能指出我的方向嗎？

更新：我想要做的是讓我的固定標題下面的東西看起來模糊，而不是真正的標題本身。我認爲我必須使標題下的div部分模糊，而不是整個div來實現這種效果。

Answer 1

是的，用jquery添加動態類名。

http://api.jquery.com/scroll/

$(window).scroll(function() { 
    $("#tag").addClass("blurredclass"); 
}); 

您可以定義滾動功能中的一個變量來檢查的offsetTop位置，這樣你就可以到達您的位置

var screenTop = $(document).scrollTop(); 

編輯之後添加模糊類：您可以預覽JSFiddle上的典型解決方案

http://jsfiddle.net/x2N3N/1/

EDIT2：如果要模糊下面的一些位置的文字滾動時：

http://jsfiddle.net/x2N3N/2/

EDIT3：變異與模糊標題：

http://jsfiddle.net/x2N3N/3/

Answer 2

還有另一種選項來幫助你解決你的問題。如果你想模糊標題背景，同時滾動頁面（例如，在iOS7上iphone）解決方案存在：

使用的實驗方法： http://codepen.io/FWeinb/full/Dfoaw

但問題是兼容性和速度：

1. Chrome 29+（啓用'experimental-webkit-features'/'enable-experimental-web-platform-features'）
2. Safari 6.1 Seed 6
3. iOS7 - 慢

Next方法是模糊呈現的HTML在畫布

更多信息和例如：http://blurpopup.labs.daum.net/

1. 用於呈現文檔作爲圖象運行html2canvas。
2. 將圖像轉換爲data-url字符串，並將其作爲背景圖像。
3. apply blur（-webkit-filter：blur ...）
4. 將bg圖層追加到文檔中，文檔的位置爲scroll scroll offset。

你可以在這裏找到html2canvas：http://html2canvas.hertzen.com/（這是一個簡單的JS庫）

我已經做了基本的使用完整的活生生的例子：

http://www.24development.cz/examples/blurred-header/

有一些限制與html2canvas渲染，但基本的想法有一點。