Giant Robot

Paperfish's new website is live this evening! I'm quite stoked with it. The design is a fairly simple template which uses a series of gentle water images in the header, and they crossfade nicely using some very sexy Javascript and CSS manipulation.

I threw this together using the YUI toolkit and a lot of fooling around to get it to behave right. I think the overlaid images are still a single pixel out (to the right), but the effect is lovely.

Saira wanted an animated header, which I felt had the potential to be bandwidth and attention greedy - it wouldn't be fair to the video this site is designed to impart to sit it next to a moving image, and a loop of water moving would consume a lot of download.

My response to this challenge was to use a random series of images (chosen by Saira), which are pulled from the graphics in a set of directories and placed into a JavaScript object. A random image is selected from the list, loaded, and then faded into the page using YUI's Animation object. After a timeout, another image is selected and faded in, and the first is faded out and replaced with a third random selection ... and so on.

This provides the appearance of a dynamic and fluid header, but without the distracting motion that a video or animation would provide - there is fluidity (the eye perceives a rippling effect) but not movement (which distracts the primitive hunter ape in your brain).

Yes, your primitive hunter ape brain.

Anyway, I think it looks sweet. But I would say that, wouldn't I?