jquery.adaptive-backgrounds.js

JavaScript

画像にマッチした背景色を配色してくれる「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

関連記事

  1. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  2. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  4. Intense Images
  5. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  6. no-image

    JavaScript

    ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

    Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが…

最近の記事

  1. フレンチトーストや自家製ソーセージ
  2. ハレイワ スムージー
  3. クローバーで淹れたコーヒー
  4. 雪が降る日本海

アーカイブ

PAGE TOP