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

jcSliderCSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」前のページ

縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」次のページOptiscroll

関連記事

  1. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

  2. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  3. swingdrag

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  4. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

  5. JQuery SlideShow

    JavaScript

    軽量な自動スライドショー(画像・動画)を実装できる「JQuery SlideShow」

    JQuery SlideShowは、画像・動画のスライドショーを実装で…

  6. no-image

    JavaScript

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP