JavaScript

ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡単に作成することができます。Webサイトのページ内に、ぼかした背景画像を取り入れたい時に役立ちますね。ぼかしたい画像を用意して設定するだけなので、手軽にぼかし背景を作れるのがいいですね。

[ads_center]

Blurrの使い方

以下から実際のデモを確認することができます。

Blurr

デモ

jQuery本体とプラグインを読み込んだ状態で、以下のようにマークアップします。data-hrefにぼかしたい画像を指定してあげます。

<div class="sample" data-href="sample.jpg"><div>sample</div></div>

そしてプラグインをセットします。オプションで高さやシャープネスなどを指定することができます。

$(document).ready(function() {
    $('.sample').blurr({
        height: 300,
        sharpness: 40,
        offsetX: 0,
        offsetY: 0,
        callback: null
    });
});

Blurr

Simple Sidebar左右どちらでも設定可能なサイドバーを実装できるjQueryプラグイン「Simple Sidebar」前のページ

中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」次のページ

最近の記事

  1. クリスマスブレンド エスプレッソロースト
  2. CIO Mate Magnet Stand
  3. 抹茶クリームドーナツ
  4. FAST
PAGE TOP