
指定した画像のプライマリーカラーを抽出して要素の背景色に設定できる「jquery.primarycolor.js」
2016年5月18日jQueryプラグイン活用
「jquery.primarycolor.js」は指定した画像のプライマリカラーを抽出して背景などの要素の背景色に設定することができます。また背景色に応じて文字に色を変えることも可能です。
こちらのプラグインはサーバーにアップすることで動くことで動作します。
JavaScript
$(function() { function reverseColor(rgb) { var rgbarr = rgb.split(','); return [ 255 - rgbarr[0], 255 - rgbarr[1], 255 - rgbarr[2] ].join(','); } $('#img').primaryColor(function(color) { $(this).parents('#bg').css({ 'color': 'rgb('+reverseColor(color)+')', 'background-color': 'rgb('+color+')' }); }); });
HTML
<div id="bg"> <img src="img.jpg" id="img"> <p id="caption">caption</p> </div>
CSS
#bg { width: 100%; padding: 70px 0 55px; text-align: center; transition: background-color .5s linear; } #img { box-shadow: 0 0 10px rgba(0,0,0,.4); } #caption { margin-top: 25px; text-transform: uppercase; }