CSS Version
A random experiment to see if I could use text shadow to create a shifting rainbow. I built a jQuery version and a normal JavaScript version, and as you may expect, introducing the jQuery object into the process slowed things down quite a bit, considering how little I used it. Good lesson in using jQuery only when needed. Removing the letters from the DOM before setting the colors made Firefox perform much better, but slowed down the fps on Safari and Chrome. Overall they all look smoother though, so it’s a good move. Now I get around 15fps on safari and chrome using for this test. Check fps with mr. doob’s stats.
Canvas Version
I decided to do a <canvas> version to test the speed differences. <canvas> is certainly a better way to do this, since it doesn’t have to live render all those drop shadows. I probably could do a similar thing with HTML/CSS, just offsetting copies of the text instead of using a drop shadow, but I think this is as far I’ll go with this idea. I get 40fps on safari and chrome using for this test.
What Does it Mean?
Published
Comments