画像の色を抽出して背景色を設置できるjQueryプラグイン「ADAPTIVE BACKGROUNDS」!

2016/07/18

こんにちは。
今回は画像の色を抽出して背景色を設置できるjQueryプラグイン「ADAPTIVE BACKGROUNDS」!です。

写真からドミナントカラーを調べて、親要素の背景色として適用する事ができるjQueryプラグインを紹介します。

画像の色を抽出して背景色を設置できるjQueryプラグイン「ADAPTIVE BACKGROUNDS」!

ADAPTIVE BACKGROUNDS

adaptive-backgrounds

 

jQueryプラグイン「ADAPTIVE BACKGROUNDS」をダウンロードしてみよう!

https://github.com/briangonzalez/jquery.adaptive-backgrounds.jsにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

jQueryプラグイン「ADAPTIVE BACKGROUNDS」を設置してみよう!

jQuery本体とjquery.adaptive-backgrounds.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。

 

html部分を記述します。
画像のimg要素に「data-adaptive-background=’1’」、親要素に「data-ab-css-background=’1’」を設定しますよ。

 

jQueryプラグイン逆引きハンドブック
jQueryプラグイン逆引きハンドブック

 

いかがでしたか。ギャラリーサイトなんかで使うとおもしろそうですね。
以上で画像の色を抽出して背景色を設置できるjQueryプラグイン「ADAPTIVE BACKGROUNDS」!でした。

topへ戻る