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.