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

    JavaScript

    スライドでコンテンツを引き出せる「Pushbar.js」

    Pushbar.jsはスライドでコンテンツやナビゲーションメニューを引…

  2. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

  3. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  4. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  5. pixelate.js

最近の記事

  1. Waterlogue
  2. macOS Mojaveのダークモード
  3. Olli
  4. 単語帳メーカー(Flashcard Maker App)

Facebookページ

PAGE TOP