こんにちは。フロントエンドエンジニアのつっちーです。
今回は、ブラウザ上で簡単に 画像にぼかし効果をかけられる jQueryプラグイン「background-blur.js」についてご紹介します。
動的に設定される画像にぼかし効果をかけるのは、意外と大変
「記事一覧ページの 各記事のアイキャッチ画像を、マウスオーバーで0.5秒かけてぼかす」
という要件があった場合、どのように実現しますか？
CSSでぼかす？
CSS には filter というプロパティがあり、値として blur（ぼかし効果の半径）を設定することで、HTML要素にぼかし効果をかけることができます。
シンプルで調整も可能ですが、IE 非対応です。
透過画像をかぶせてぼかす？
png画像は透明度を持っているので、半透明の色を表現することができます。
フィルターとなる画像を作って上にかぶせれば実現できそうな気がしますが、Photoshop や CSS のフィルターのように、下にある色がぼやけて広がる効果は得られません。たんに、上に半透明の色が重なるだけです。
ぼかした画像を用意しておく？
元画像と ぼけた元画像が一緒に取得できれば、ブラウザでぼかし効果をかける必要はありません。しかし、記事の投稿ごとに投稿者に画像を２種類用意してもらう運用にするわけにはいかないでしょう。
また、ImageMagick を利用し、サーバーサイドで効果のかかった画像を用意することもできますが、フロントエンド・バックエンドで担当者が分かれている場合、バックエンド側にも作業が発生してしまいます。
＊＊＊
このように、動的に設定される画像にぼかし効果をかけるのは、意外と大変です。
そこで役に立つのが、background-blur.js です。
background-blur.js を使ってみよう
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 ですが、まだまだサポート期間が残っています。それまでの間は、とても重宝するプラグインだと言えるのではないでしょうか。
どんどんぼかしていきましょう！
ではまた。つっちーでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
