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

関連記事

  1. Smooth Scroll behavior polyfill
  2. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

  3. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  4. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  5. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  6. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

最近の記事

  1. Kindle Oasis
  2. OWL-WDDESK01
  3. ワンタッチ着脱フィルターキット
  4. Soundcore Ace A1

アーカイブ

PAGE TOP