Initially, my logo was 105K GIF. Now it’s transparent PNG+JS. As easy as:
//
var color = 0;
var interval = 60; /* time msec, after which color changes */
var clrInc = 4; /* HSV degree increment */
function chcolor(){
var t1_logo = document.getElementById("t1_tl"); /* div_to_animate */
color < 360 ? color = color + clrInc : color = 0;
t1_logo.style.backgroundColor = "hsl("+color+", 100%, 50%)";
}
function stchcol(){
var logoChCol = setInterval(chcolor, interval);
}
window.onload = stchcol;
//-->
and
Benefits are smaller page size, smaller prcessor load. Eventuall, animation in JS consumes lees resources than a GIF rendering. 35% losad with GIF animation vs 15% load with JS animation. At least, in Fedora 16 with nouveau.
The idea was given to me by fiskus, but it was quite a long ago, so I feel I had the same idea at the moment he suggested it to me. Nevertheless, he desrves a credit.
