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. CSS Emoticons
  2. PopSelect

    JavaScript

    タグ形式のセレクトボックスをポップオーバーで表示させる「PopSelect」

    PopSelectはタグ付けするような感覚のセレクトボックスをポップオ…

  3. ScrollMenu.js

    JavaScript

    縦横配置やナビメニューと統合できる便利なスクロールバー「ScrollMenu.js」

    ScrollMenu.jsは通常の味気ないスクロールバーを便利で新しい…

  4. scrollama.js

    JavaScript

    スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

    scrollama.jsは、スクロールイベントを実装することができるモ…

  5. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  6. Grasp Mobile Progress Circle

コメント

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

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

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP