[jQuery]画像にblur効果をつけるbackgroundBlurプラグイン

JavaScriptで画像にblur効果をつけることってできないのかなーっとぐぐっていたら、

background-blurプラグイン

を発見したので、その使い方を勉強しました。

<script src="jquery.min.js"></script>
<script src="background-blur.min.js"></script>

でJavaScriptの準備を行う。

次にhtmlエレメントを用意する。

<div class='_hoge'></div>

最後にinitを行う。

$('._hoge').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
});

で、実行した結果、class="_hoge"に対して、cssでwidthとheightの設定が必要でしたがそれ以外は、上の手順でblur効果をつけることができましたー。