jQueryでボックスごとにランダムな背景色をつける

ホワイト中心のシンプルなサイトに遊びゴコロを。

グリッドレイアウトなどのボックスが連なったデザインは美しいですが、その幾何学的な並びが冷たい印象を与えかねません。そこで、マウスオーバーするとカラフルに色が変化するエフェクトを作ってみました。

$(".box").each(function(){
	$.data(this, "hcolor", {
	r: Math.floor(Math.random()*50) + 190,
	g: Math.floor(Math.random()*50) + 190,
	b: Math.floor(Math.random()*50) + 190
	});
	}).hover(
	function(){
	$(this).stop().animate({
	backgroundColor: "rgb("
	+ $.data(this,"hcolor").r + ","
	+ $.data(this,"hcolor").g + ","
	+ $.data(this,"hcolor").b + ")"
	},500);
	},
	function(){
	$(this).stop().animate({
	backgroundColor: "rgb(255,255,255)"
	},500);
	}
	)

クラス属性値に「box」を含む要素にマウスオーバーすると色が変化します。色はRGBの各値が190〜240の間で変化するようになっています。
動作にはjQueryとjQuery Color Anmations pluginが必要です。

動作サンプルはこちらのサイトのデザイン実績などの一覧ページでご覧ください。

ON℃ design オンドデザイン

コンセプトデザインを得意とするデザインスタジオです。このエフェクトのアイデアもオンドデザインさんです。ありがとうございました。

No related posts.

関連記事はYARPP関連記事プラグインによって表示されています。