広告の限界を超える|セールス
広告の限界を超える|セールス
2016.12.26

ブラウザ上で簡単ぼかし効果!background-blur.jsを使ってみた

つっちー


こんにちは。フロントエンドエンジニアのつっちーです。

今回は、ブラウザ上で簡単に 画像にぼかし効果をかけられる jQueryプラグイン「background-blur.js」についてご紹介します。

この記事の内容は、2016.12.26時点での最新バージョンである v0.1.3 にもとづくものです。

動的に設定される画像にぼかし効果をかけるのは、意外と大変

記事一覧ページの 各記事のアイキャッチ画像を、マウスオーバーで0.5秒かけてぼかす

という要件があった場合、どのように実現しますか?

CSSでぼかす?

CSS には filter というプロパティがあり、値として blur(ぼかし効果の半径)を設定することで、HTML要素にぼかし効果をかけることができます。
シンプルで調整も可能ですが、IE 非対応です。

透過画像をかぶせてぼかす?

png画像は透明度を持っているので、半透明の色を表現することができます。
フィルターとなる画像を作って上にかぶせれば実現できそうな気がしますが、Photoshop や CSS のフィルターのように、下にある色がぼやけて広がる効果は得られません。たんに、上に半透明の色が重なるだけです。

ぼかした画像を用意しておく?

元画像と ぼけた元画像が一緒に取得できれば、ブラウザでぼかし効果をかける必要はありません。しかし、記事の投稿ごとに投稿者に画像を2種類用意してもらう運用にするわけにはいかないでしょう。

また、ImageMagick を利用し、サーバーサイドで効果のかかった画像を用意することもできますが、フロントエンド・バックエンドで担当者が分かれている場合、バックエンド側にも作業が発生してしまいます。
 
***
 
このように、動的に設定される画像にぼかし効果をかけるのは、意外と大変です。
そこで役に立つのが、background-blur.js です。

background-blur.js を使ってみよう

blur161222
https://msurguy.github.io/background-blur/

background-blur.js は、画像にぼかし効果をかけるための jQueryプラグインです。

主要ブラウザをすべてサポート。IE も 9 以上に対応

もちろんスマートフォンブラウザにも対応しています。
これで CSS で満たせなかった要件が解決です。

ぼかし効果には SVG のフィルター要素を利用

肝心のぼかし効果は、上記のどの方法でもなく、SVG の filter要素によって実現しています。この方法なら、Photoshop や CSS のフィルターと同じく、下にある色の範囲がぼやけて広がる効果がきちんと表現されます。

また、filter要素は SVG の要素にしか効果がないため、対象となる画像には、img要素や CSS の background-image でなく、SVG の image要素が使用されています。
これで透過画像で満たせなかった要件も解決です。

DOMを操作するだけなので、フロントエンドで完結し、バックエンド側に作業が発生することもありません。

使い方

jQueryプラグインとして実装されているため、script要素で読み込む場合は、jQuery のあとに読み込みましょう。

<script src="jquery.min.js"></script>
<script src="background-blur.min.js"></script>

Node.js のパッケージにもなっているので、npm でインストールすることもできます。
npm i background-blur

ではさっそく画像をぼかしてみましょう。

See the Pen 161101 by ligdsktschy (@lig-dsktschy) on CodePen.

たったこれだけ! 簡単。

次に、ぼかし効果を強くしてみましょう。
オプションを設定する際は、引数にオプションを渡します。初期値の 10 より大きな値を設定してみると……、

See the Pen 161102 by ligdsktschy (@lig-dsktschy) on CodePen.

ぼかし効果が強くなりました。
これでぼかし効果のかかった画像を用意することができたので、あとは残りの要件(マウスオーバーで 0.5 秒)を満たしていきましょう。

ホバーで画像をぼかす

background-blur.js には、フェードイン・アウトさせる機能も用意されていますが、制御の手軽さとパフォーマンスを考え、ここでは CSSアニメーションを利用して実装していきます。

まず、元となる画像を用意し、同サイズの空要素をぴったりと下に重ね、空要素にはぼかし画像を設定します。

See the Pen 161103 by ligdsktschy (@lig-dsktschy) on CodePen.

そして、元画像の要素に opacityプロパティを対象とした transition を設定し、
擬似クラス hover に opacity:0 を設定すれば、ホバー効果の完成です。

See the Pen 161104 by ligdsktschy (@lig-dsktschy) on CodePen.

今回の要件では、記事ごとに異なる画像を設定する必要があるため、画像のURLはサーバーサイドから設定できる必要があります。

ぼかし画像のURLは HTML の data属性に設定し、js もそれを利用するように書き換えておきましょう。

See the Pen 161105 by ligdsktschy (@lig-dsktschy) on CodePen.

完成です!

background-blur.js のその他の機能

background-blur.jsに は、ほかにも便利な機能が用意されています。

See the Pen 161106 by ligdsktschy (@lig-dsktschy) on CodePen.

CSSアニメーションが使えない IE9 では、fadein, fadeout 機能を使って同様の実装ができそうですね。

overlayClass は、画像の上に CSS で更に効果をつけたい場合などに使えそうです。

まとめ

CSSfilter 非対応の IE11 ですが、まだまだサポート期間が残っています。それまでの間は、とても重宝するプラグインだと言えるのではないでしょうか。

どんどんぼかしていきましょう!
ではまた。つっちーでした。