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. しろいくろの黒豆塩大福とガトーショコラ
  2. ボヤージュブレンド
  3. 紫陽花とセミの抜けがら
PAGE TOP