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.)

Xmas Lights

Posted by Dion Almaer at 8:28 am

3.4 rating from 30 votes


Comments feed TrackBack URI

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.

Comment by Schill — January 17, 2008

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)

Comment by Abicus — December 29, 2009

Leave a comment

You must be logged in to post a comment.