animation image
animation image
animation image
animation image
animation image
animation image
animation image
animation image
animation image
animation image
animation image
animation image

Tragedy

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 one definitely falls in the category of a bad dream. A close look will show that it alludes to the devestation the city of Detroit has undergone since the late 1960s. The central images are an antique map of Detroit and a US military map of the blast and fire area caused by the US' bombing of Hiroshima, Japan. The map of Detroit includes the hometown of my childhood and adolescence, Royal Oak, MI.

How?

The experiment consists of two primary images, as noted above, and ten separate images for each of the "blast zones".  The experiment plays with opacity and timing to achieve the final result. 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.