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. jquery.square.js

    JavaScript

    スクエアなグリッドレイアウトを実装できる「jquery.square.js」

    jquery.square.jsは、スクエアなグリッドレイアウトを実装…

  2. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  3. RV gallery-slider

    JavaScript

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

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

  4. JavaScript

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2013年上半期に紹介したjQueryプラグイン50選まとめ

    気づいたらあっという間に2013年上半期が終わってしまいましたね。とい…

  6. Naver

    JavaScript

    シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

    NaverというjQueryプラグインがすごくシンプルでよかったのでご…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP