animation image
animation image
animation image

Water

NOTICE TO MAC MOUNTAIN LION + SAFARI 6 USERS: Please accept my apologies for the horrible flashing on my animation experiments. Safari 6 (on Mac OSX 10.8+) has a widespread CSS3 animation rendering bug that is causing the problem. Until Apple resolves the issue, I encourage you to try these pages in Chrome or Firefox for the ideal experience.

This is really just a lo-fi starter dream...as you go deep below the surface of the sea. More will come from this dream in the future.

How?

This was an obvious second experiment after the Tree dream. One image at the top creates the effect of the water's surface and light rays. An additional image is used for each school of fish, which are then manipulated by opacity, size, and position. I began to play with additional images, including an emerging submarine (schematic, of course), but gave up on that for now. jQuery to CSS3 transition support is provied by the excellent jQuery Transit plugin.

Browser Support

All modern browsers. 

Other Dreams

View the rest of the visual experiments.

blog comments powered by Disqus

Get in Touch

Question, comment or request? Send me a note.