jquery.adaptive-backgrounds.jsは、画像から最も支配的な色を抽出し、その背景にふさわしい色を配色するためのjQueryプラグインです。WEBデザインにおける背景色の決定は、簡単なようですがサイトのイメージをガラリと変えてしまうので、意外と神経を使うところですよね。また、配色にはセンスが問われます。迷うことなく、背景をコンテンツ画像にマッチさせてくれるjquery.adaptive-backgrounds.jsをご紹介します。
ドミナントカラーから背景色を決める
以下、jquery.adaptive-backgrounds.jsの実際のデモになります。
jquery.adaptive-backgrounds.jsは、背景に関するあなたの迷いを解決してくれるjQueryプラグインです！
自動的に画像の支配色を認識し、背景色に抽出してくれます。この時の、画像を支配的に印象づける色を「ドミナントカラー」と呼びます。ドミナントカラーを背景色に使用する例は、実は私たちの身近なところで見られます。AppleMusicです。アルバムを開くと、アルバムのジャケットに合わせて背景が変化します。初めて見た時に感動した人も多いのではないでしょうか。
本題に戻ります。jquery.adaptive-backgrounds.jsの仕組みは、CSSの背景画像に要素を適用させます。それによって、背景画像のドミナントカラーを認識し、背景色をサポートしてくれるのです。
具体的には、主となる画像（img要素）に「data-adaptive-background=’1’」を、背景を設定する親要素には「data-ab-cuss-background=’1’」を設定します。
オプション機能もいくつかあります。
- normalizeTextColor・・・背景色の明暗によってテキストの色を調整してくれます。（デフォルト：fales、動作：true）
- exclude・・・制作者が指定した色の間で、ドミナントカラーを設定してくれます。（デフォルト：’rgb(0,0,0)’, ‘rgba(255,255,255)’）
対応ブラウザは、Chrome・Internet Explorer 9以降・Firefox・Vivaldi・Safari・Androidなど多数対応しています。
jquery.adaptive-backgrounds.jsを使用すれば、画像の印象をグッと高めることができるので、ぜひチェックしてみてはいかがでしょうか？
