blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

2013.09.27

FoggyというjQueryプラグインを使ってみました。これを使えば指定した要素をblur効果でとても簡単にぼかしてくれます。使い方もシンプルなので、ちょっとぼかしたい部分があるという時に活躍できそうですね。以下は使い方です。

[ads_center]

Foggyの使い方

Foggy

こんな感じで指定した要素をぼかすことができます。

使い方は、jQueryとプラグインファイルをhead内に読み込んだ状態で、以下のようにセットするだけです。以下はsampleというクラス名がついた要素をぼかす例です。

$(function() {
    $('.sample').foggy();
});

オプションでは、ぼかしの強弱や透明度を設定することができます。指定する場合は以下のように記述します。

$(function() {
    $('.sample').foggy({
        blurRadius: 5,
        opacity: 0.6,
        cssFilterSupport: true
    }); 
});

blurRadiusはぼかしの強弱、opacityは透明度を変更することができます。