NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

指定した画像のプライマリーカラーを抽出して要素の背景色に設定できる「jquery.primarycolor.js」

2016年5月18日jQueryプラグイン活用

指定した画像のプライマリーカラーを抽出して要素の背景色に設定できる「jquery.primarycolor.js」

「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;
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. 指定した画像のプライマリーカラーを抽出して要素の背景色に設定できる「jquery.primarycolor.js」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com