2014/11/11

【jQuery】要素にぼかし効果を与えられるjQeryプラグイン『Blurme』の使い方

【jQuery】要素にぼかし効果を与えられるjQeryプラグイン『Blurme』の使い方

前回は,画像にモザイクを掛ける方法を紹介しましたが,今回は要素にぼかし効果を与えられるjQueryプラグイン『Blurme』の使い方を紹介します.

目次

入手方法

まず,https://github.com/netcode/blurmeにアクセスし,右側のDOWNLOAD ZIPをクリックし,ダウンロードします.

次に,ダウンロードしたファイルを解凍し,中にあるblurme.jsをjQuery本体とともに読み込み,blur.svgというファイルをWebサイトのいずれかのディレクトリに置いておきます.

使用方法

要素にぼかし効果を与える為に,JavaScriptで処理を以下のように記述します.

$("ぼかしたい要素").blurMe({
    radius : 3,  //この数値を大きくするとぼかし効果が強くなります
    svgFallback : "blur.svg" //blur.svgファイルへのパス
});

※前述のblur.svgが無いと動きません

サンプル

動作サンプルは,ダウンロードしたファイル内のexample.htmlを表示することで見られます.

また,このプラグインでは,ぼかし効果だけを付与されるので,以下の様にマウスオーバー/マウスアウトでの処理と組み合わせると,マウスオーバー時にぼかし効果が解除される動作をさせることができます.

$(document).ready(function() {
    $(".blur").blurMe({
	radius : 3,
	svgFallback : "blur.svg"
    });
    $("img").hover(function() {
	$(".blur").blurMe({
	    radius : 0,
	    svgFallback : "blur.svg"
	});
    }, function() {
	$(".blur").blurMe({
	    radius : 1,
	    svgFallback : "blur.svg"
	});
    });
});

まとめ

Photoshopでぼかし効果をつけることが多いと思いますが,要素毎にぼかし効果の強度を変えらたり,他の処理と組み合わせることで,様々な演出ができるようになるでしょう.