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. HTML5 Sortable

    JavaScript

    リストをドラッグ&ドロップで並べ替えることができるjQueryプラグイン「HTML5 So…

    リスト化した要素をドラッグ&ドロップで並べ替えることができるjQuer…

  2. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

  3. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

  5. imagelightbox

    JavaScript

    レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

    imagelightboxは、レスポンシブに対応したタッチフレンドリー…

  6. ptrLight

    JavaScript

    モバイル用のリフレッシュインジケーターを実装できる「ptrLight」

    ptrLightはモバイル用のリフレッシュインジケーターを実装すること…

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP