WEBディレクターの平井です。
　
仕事の波ってありますよね。弊社は2〜3月が繁忙期になるタイプの制作会社でして、
スケジュール表とにらめっこの毎日です。

　
さて今回は、

こういう画像があったとして、
これの色をカラフルに変化させたい場合にどうしましょう、というお話です。

サンプル

Flashでもなく、CanvasやSVGでもなく、GIFアニメーションでもなく、
れっきとしたJavascript/jQueryなのですが、そんなことできるのでしょうか。

[php] $(function(){
var i = 0, j = 0;
function changeColor(){
i += 5;
j += 3;
if(i>=360) i=0;
if(j>=360) j=0;
var colorR = Math.abs(Math.round(Math.cos(i*Math.PI/180)*128));
var colorG = Math.abs(Math.round(Math.cos(j*Math.PI/180)*128));
$(‘#badge’).css("background-color","rgb("+colorR+","+colorG+",64)")
}
$(‘#badge’).fadeIn();
setInterval(changeColor,70);
});[/php]

　
　…タネ明かしをすると、白い透過PNGを置いて、後ろにあるdivの背景色をcssで変えているだけです。

単純ですね。
でも発想の転換、ということで、こういうのを選択肢として思いつけるように頭を柔らかくしておきたいですね。

それでは。