巧用Vague.js实现下拉模糊渐变

一款简洁的主题又我给修改成了一个复杂的主题，真是让人烦躁啊。细心的朋友会发现在向下滚动页面的时候header部分会逐渐模糊，有没有感觉这个效果很赞啊。

首先要感谢开源项目Vague.js，Github地址https://github.com/GianlucaGuarini/Vague.js，这个jquery插件可以通过SVG滤镜对html元素进行模糊处理，下面是对这个插件的简单介绍

 浏览器支持情况

Mozilla Firefox (v10 及以上)

Google Chrome (v18 及以上)

Safari (v6.0 及以上)

Microsoft Internet Explorer (v7-9; 不支持v10+ )

基本用法

引入脚本，之后

var Vague = $('#yourelement').Vague({
intensity: 3, // Blur Intensity
forceSVGUrl: false // Force absolute path to the SVG filter
});
Vague.blur();

还是非常简单的

逐渐模糊是怎么做出来的

原理就是监控浏览器滚动高度，然后转换成模糊强度，还是非常简单的，下面是执行代码~

$(window).scroll(function() {
        var distance = $(window).scrollTop();
        var amount = Math.round(distance / 100);
        var vague = $(".header-container").Vague({
            intensity: amount
        });
        vague.blur();
    });