Wednesday, January 16th, 2008
Winter Holiday Christmas Lights
Category: Fun, Showcase
, Sound
Scott Schiller redesigned his site for the holidays and I somehow missed it. He tends to experiment with JavaScript in this way, and this year is a great example:
Move your mouse over the christmas lights (with headphones), and blow off some holiday stress! Smash -all- of the lights, and you will be.. rewarded. ;) This uses SoundManager 2 for the effects, and YUI for DOM, Animation and the Slider widget. The site’s time-sensitive (night/day) and you can control the “lighting” and other effects via a slider, but I’ll leave it for you to check out if interested. ;)
I was also pleased to note that the YUI worked nearly flawlessly when the site is rendered in proper XML/standards mode (XHTML sent with the “application/xhtml+xml” MIME type), which also makes JavaScript a little more “strict” – ie., you can’t reference document.body any more, and so on.
The design is intentionally experimental, and uses a lot of alpha-transparent PNGs, animation and CSS opacity (there is an “enhanced FX” checkbox in the UI which enables/disables the fancy stuff), and will put a pretty good load on any modern system. The point was to see how the different browsers would perform; Safari 3 and Firefox 3 (beta) both handle things quite well, Opera and IE 7 do a decent job as well. (Unfortunately I had to degrade IE 6, it couldn’t handle all the PNGs + opacity.)
Oops- Since the holidays ended, I moved the Christmas lights bit here. It’s worth repeating, the intent was to try some experimental JS/CSS stuff, CPU-heavy, ridiculous amounts of PNG/alpha opacity effects, fading background/foreground colors, animation and so on. Firefox 3 and Safari 3 are notably faster than their V2 counterparts in rendering/layout from what I’ve tested (most obvious on intentionally-heavy pages such as the above), which is excellent to see.
where can I get the script for these lights? it’s a fantastic animation, I need it to work in IE6..(that beast just wont die)