[jQuery]背景画像にぼかしを入れるプラグイン

Blurrプラグインの紹介

BlurrはシンプルなjQueryのプラグインです。
そして、背景画像にとてもすてきなぼかしを入れてくます。

導入方法

まずは、jQueryとBlurrのjsファイルを読み込みます。

<script src="jquery.min.js"></script>
<script src="jquery.blurr.js"></script>

HTMLでは、divを用意します。

<div class="blur-this" data-href="example-image.jpg"><div>画像の上に表示したいテキスト</div></div>

注意：blur-thisの中に必ずdivが必要です。

$(document).ready(function() {
　$('.blur-this').blurr({
　　height: 300, // ぼかしをかけたいdivの高さ
　　sharpness: 40, // 0〜100までの間で数字が大きいほどぼける
　});
});

最後に実行して終わりです。パラメータは設定しなくても問題ありませんので、その場合、下記の実行文のみで大丈夫です。

$(document).ready(function() {
　$('#blur').blurr();
});

シンプルにこれだけです。

まとめ

数を置くと動作がちょっと重いのが難点ですが、ぼかしをかけたい時にはシンプルなのでちょうどいいかもしれません。