Background Blur

JavaScript

画像をボカしてくれるクロスブラウザ対応の「Background Blur」

Background Blurは画像をカッコよくボカしてくれるクロスブラウザに対応したjQueryプラグインです。ファイル容量も軽量なのでサクサク動作します。使い方もシンプルで、オプションもいくつか用意されています。

Background Blur

デモ

デモページでは、ボカされた背景画像が設置されており、サムネイル画像をクリックすると背景画像が切り替わる仕組みになっています。

選択したサムネイル画像をベースにボカしています。フェードアニメーションを用いて優雅に切り替えすることも可能です。

また、オプションもいくつか用意されていて、imageURL、blurAmount、imageClass、duration、endOpacityといった項目の値を指定できます。

軽量ながらも、Chrome、Firefox、Safari、iOS、Android browsers、IEなどさまざまなブラウザに対応しているのがうれしいですね。

使い方も簡単なので気軽に使用できると思います。背景画像にボカしを入れたクールなサイトをつくりたい、またはPhotoshopなどでわざわざボカした画像をつくるのがめんどくさいという人は、ぜひチェックしてみてください。

Background Blur

jQuery.Flexdatalistテキスト入力候補を表示させれる「jQuery.Flexdatalist」前のページ

超軽量なホバーカルーセルを実装できる「Hover Carousel」次のページHover Carousel

関連記事

  1. Impulse Slider

    JavaScript

    3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

    Impulse SliderというjQueryプラグインを使えば3Dス…

  2. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  3. stackgrid.adem.js

    JavaScript

    コンテンツをグリッド状にスタッキングできる「stackgrid.adem.js」

    stackgrid.adem.jsはコンテンツをグリッド状にスタッキン…

  4. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

  5. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

最近の記事

  1. Anker PowerExpand 8-in-1 USB-C PD 10Gbps データ ハブ
  2. SAP-001
  3. OWL-QI10W2Q18W
  4. アースクーラー3WAY

アーカイブ

PAGE TOP