Blog

写真のドミナントカラーを親要素の背景色にするjQueryプラグイン「jquery.adaptive-backgrounds.js」

jquery.adaptive-backgrounds.js

jquery.adaptive-backgrounds.jsはimgの画像のドミナントカラーを調べて、

背景色にしてくれるjQueryのプラグインです。

写真に合わせて背景色を変えるデザインなどで使えそうです。

 

ちなみにこちらのjQueryプラグインでは、色の取得にHTML5のCanvasを使っているため、

HTML5に対応したブラウザで動作します。

 

DEMO

 

使い方

こちらからファイルをダウンロードし、htmlのheadでjqueryと一緒にJSファイルを読み込みます。

 

色を取得するターゲットとなるimg要素に「data-adaptive-background=’1’」を、

背景色を設定する親要素に「data-ab-css-background=’1’」を設定します。

 

以下のコードでプラグインを実行します。

 

取得した色の情報などは、以下のように記述することで取得が可能です。

背景色に反映される色の data.color以外に、data.palette[0]〜data.palette[19]に画像からサンプリングした色が入っていますので、

こちらも合わせて使うと、もっとデザインの幅が広がるかもしれません。

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ