2014/11/12
写真のドミナントカラーを親要素の背景色にするjQueryプラグイン「jquery.adaptive-backgrounds.js」
jquery.adaptive-backgrounds.js
jquery.adaptive-backgrounds.jsはimgの画像のドミナントカラーを調べて、
背景色にしてくれるjQueryのプラグインです。
写真に合わせて背景色を変えるデザインなどで使えそうです。
ちなみにこちらのjQueryプラグインでは、色の取得にHTML5のCanvasを使っているため、
HTML5に対応したブラウザで動作します。
使い方
こちらからファイルをダウンロードし、htmlのheadでjqueryと一緒にJSファイルを読み込みます。
|
1 2 3 4 5 6 | <head> ・・・ <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.adaptive-backgrounds.js"></script> ・・・ </head> |
色を取得するターゲットとなるimg要素に「data-adaptive-background=’1’」を、
背景色を設定する親要素に「data-ab-css-background=’1’」を設定します。
|
1 | <li class="image" data-ab-css-background='1'><img src="images/spring1.jpg" alt="image" data-adaptive-background='1'></li> |
以下のコードでプラグインを実行します。
|
1 2 3 | $(function(){ $.adaptiveBackground.run(); }); |
取得した色の情報などは、以下のように記述することで取得が可能です。
|
1 2 3 4 5 6 7 | $(function(){ $.adaptiveBackground.run({ success: function($img, data) { console.log("color-code: " + data.color); } }); }); |
背景色に反映される色の data.color以外に、data.palette[0]〜data.palette[19]に画像からサンプリングした色が入っていますので、
こちらも合わせて使うと、もっとデザインの幅が広がるかもしれません。
Author Profile
SHARE
