JavaScript

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

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

[ads_center]

Foggyの使い方

Foggy

Foggy

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

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

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

オプション

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

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

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

関連記事

  1. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  2. jquery.confirmDialog
  3. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

  4. Protip

    JavaScript

    カスタマイズ性抜群のツールチップを実装できる「Protip」

    Protipはカスタマイズ性が抜群のツールチップを実装することができる…

  5. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  6. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP