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

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

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

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

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

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

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/