动态标题模糊滤镜

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

还有另一种选择可以帮助您解决问题。如果你想在滚动页面时模糊标题背景（例如在iphone上的iOS7中），解决方案就存在：

使用实验方法 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 - 慢

下一种方法是在画布中模糊渲染的html

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

1. 运行html2canvas将文档渲染为图像。
2. 将图片转换为data-url字符串，并将其设置为背景图片。
3. 应用模糊（-webkit-filter：blur ...）
4. 将bg图层附加到文档滚动偏移位置的文档中。

你可以在这里找到html2canvas：http://html2canvas.hertzen.com/（这是一个简单的js库）

我已完成基本用法的完整实例：

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

html2canvas渲染有一些限制，但对于基本概念，有一点重要。