こんにちはマッキーです。

前回に引き続きJavaScriptプラグイン紹介第二弾です。

今回は写真の周囲の背景色を写真に応じて変更する面白い動作をするjQueryプラグイン「jquery.adaptive-backgrounds.js」のご紹介です。
どんな感じかイメージしずらいと思うので、まず下の写真をご覧ください。


写真の左右に色がついていますが、これはプラグインが写真の色に応じて自動的に背景色を追加しています。

とても簡単に使えますので早速、使用例を見てみましょう。

<!----------JavaScript---------->

<!--jQueryの読み込み(googleから読み込むので下記のURLのままで動きます)-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<!--jquery.adaprive-backgrounds.jsの読み込み(設置したURLに変更して下さい)-->
<script src="./jquery.adaptive-backgrounds.js"></script>

<!--背景色を設定する(下記のままで動きます)-->
<script>
$(document).ready(function(){
  $.adaptiveBackground.run();
});
</script>

<!----------HTML---------->

<!--img要素に「data-daptive-background」と書くだけで囲んでるdivに背景色が！-->
<div style="width:100%;"><img src="画像URL" style="max-width:80%" data-adaptive-background /></div>

プラグインを読み込んで「背景色を設定する(下記のままで動きます)」の下４行をコピペし、img要素に「data-daptive-background」と書くだけで囲んでる要素に色が付きます。

構造がシンプルでCSSや他のプラグインなどの効果とも組み合わせしやすいので、大きなイラストや写真の見せ方に一ひねり加えられそうですね。

プラグインのダウンロードやより高度な使い方は下記のリンクを参考にして下さい。

ダウンロード　プラグイン開発ページ

それではまた、近いうちにお会いしましょう。