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. jQuery Responsive Thumbnail Gallery Plugin

    JavaScript

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive T…

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQue…

  2. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  3. timedropper

    JavaScript

    時刻を指定しやすくしてくれるjQueryのタイムピッカー「timedropper」

    timedropperは時刻の指定をしやすいUIを実装できるjQuer…

  4. JavaScript

    シンプルで軽量のレスポンシブなjQueryスライダー「ResponsiveSlides.js」を使っ…

    とてもシンプルで使いやすそうなレスポンシブのjQueryスライダー「R…

  5. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

コメント

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

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

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP