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は透明度を変更することができます。

Responsive Elements指定した要素をレスポンシブにしてくれるjQueryプラグイン「Responsive Elements」前のページ

中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」次のページFilmRoll

関連記事

  1. Sal.js

    JavaScript

    Vanilla JSによる軽量のスクロールアニメーションライブラリ「Sal.js」

    Sal.jsは軽量のスクロールアニメーションを実装できるライブラリです…

  2. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  3. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  4. no-image
  5. Docked Link jQuery Plugin
  6. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

コメント

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

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

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP