[JS]特定の要素にブラー効果（ぼかし）を与えるjQueryプラグインFoggy

jQueryプラグイン・ライブラリ

2014.09.17

スマホアプリ起動時のスプラッシュ画像などにもよく見る「磨りガラス風のぼかし」効果ですが、

特定の要素に対してこのぼかし効果を与えることができるというjQueryプラグインFoggyのご紹介です。

Foggy のダウンロード
Foggy の設置方法
CSS で背景画像を指定したDIV 要素をぼかす

Foggy のダウンロード

以下のページより、Foggyのファイルをダウンロードします。
Foggy

Foggy の設置方法

<head>タグ内に、jqueryファイルと一緒にjquery.foggy.min.jsファイルを設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.foggy.min.js"></script>
<script>
 $(document).ready(function(){
	$('.blur').foggy({
   blurRadius: 5,
   opacity: 0.5,
   cssFilterSupport: true
 });
});
</script>

$(document).ready(function(){

$('.blur').foggy({

blurRadius: 5,

opacity: 0.5,

cssFilterSupport: true

});

</script>

上記例では、blurというクラス名の要素に対してブラー（ぼかし）効果を与えます。

オプションのblurRadiusは「ぼかしの強さ」です。値が大きいほどぼかしがきつくになります。

opacityは「透明度」です。値が大きいほどはっきり表示されるようになります。

CSS で背景画像を指定したDIV 要素をぼかす

例として、background-imageで背景画像を指定したDIV 要素にブラー（ぼかし）効果を与えてみました。

<style>
.blur	{
	width:640px;
	height:480px;
	background-image:url(./images/foggy01.jpg);
	background-position:50% 0;
	background-repeat:no-repeat;
}
</style>

<div class="blur"></div>