ページ全体にブラー効果をかけるVague.jsの使い方

1、ブラーを付けたい要素をブロック要素で囲む

<div id="blurArea">
 ~略 通常どおりのコーディング~
</div>

2、jQuaryの本体と、vague.jsを読み込む

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="/js/lib/vague.js"></script>

3、トリガーとパラメータを設定する

var vague = $( '#blurArea' ).Vague({intensity:2});
vague.blur();

※メモ
 Firefoxブラウザにて、filterがかかった要素の中ではpositionが正しく取れないという現象が起こった。
 不具合かは不明。
 positionを指定したいブロックを、Filter用divから外に出すことで解消させた。外に出したブロックは別途filterをかけ直した。

参考サイト

ProgrammerBOX -プログラマーボックス-
大流行した画像のブラー加工をJSでささっと実装出来る「Vague.js」が面白い。
http://programmerbox.com/2013-08-01_blur_vague_js/