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

関連記事

  1. Swipebox

    JavaScript

    スマホやタブレットのスワイプにも対応したLightboxを実装できるjQueryプラグイン「Swip…

    今後かなり需要がありそうなjQueryプラグインがあったので使い方も兼…

  2. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

  3. nanoGALLERY
  4. jQuery Countdown

    JavaScript

    手軽に使えるカウントダウンタイマーを実装できる「jQuery Countdown」

    jQuery Countdownは手軽に使えるカウントダウンタイマーを…

  5. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  6. Letter by Letter JS

    JavaScript

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

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

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP