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. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  2. RV gallery-slider

    JavaScript

    軽量でタッチフレンドリーなギャラリースライダー「RV gallery-slider」

    RV gallery-sliderは軽量でタッチフレンドリーなギャラリ…

  3. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  4. JavaScript

    テキストの一部分をサラっとアニメーションさせるjQueryプラグイン「dynamo.js」

    テキストで指定した一部分をサラっとアニメーションさせるjQueryプラ…

  5. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  6. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP