画像にマッチした背景色を配色してくれる「jquery.adaptive-backgrounds.js」

jquery.adaptive-backgrounds.js

jquery.adaptive-backgrounds.jsは、画像から最も支配的な色を抽出し、その背景にふさわしい色を配色するためのjQueryプラグインです。WEBデザインにおける背景色の決定は、簡単なようですがサイトのイメージをガラリと変えてしまうので、意外と神経を使うところですよね。また、配色にはセンスが問われます。迷うことなく、背景をコンテンツ画像にマッチさせてくれる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

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives