New Project: Birdmanizer
- published:
- 2009.02.18
- topics:
- css
- javascript
I started a new project just for kicks: the Birdmanizer. It is a tool which loads any website and animates it into your browser view using the "cinema newspaper" (or perhaps "spinning vinyl") style CSS effect I mentioned in my earlier blog post on CSS Transforms. I was inspired by the cut scenes in the original Batman TV series, as well as the cut scenes from the Harvey Birdman cartoon series — where the project gets its name and audio clip.
This is very much a work in progress. The effect currently only works in WebKit based browsers such as Safari. Got Safari? What are you waiting for, try it out!
The reason the effect only works in Safari, and the reason it is so slow (if you don't have the latest quad core), both have to do with how the animation is created. Rather than using Flash I am using some draft CSS3 properties and very little JavaScript. Safari has support for both CSS Transforms and CSS Transitions which are the two CSS properties I used.
To accomplish the effect, first you set an initial CSS Transform style and CSS Transition style for the <iframe> containing the target website. Once this is done, if you change the CSS Transform style dynamically with JavaScript the browser just takes over and animates the change from the initial transform style to the new style based on the type of CSS Transition you have specified. One important thing to note, your initial transform style must include all of the same transform functions as your final transform style. For example, this is the initial CSS of the Birdmanizer <iframe>:
-webkit-transition: -webkit-transform 1s ease-in; -webkit-transform: rotate(0deg) scale(0.05);
If I had only included the transform function scale(0.05) in the initial CSS before updating the CSS Transform style to its new value rotate(1440deg) scale(0.5) with JavaScript then it turns out that only the scale animates, not the rotation.
Since I am already using some CSS properties only supported in one family of browsers, I thought I might as well go all in for the whole project. Hence, I am also playing the sound on the birdmanized page using the (X)HTML5 <audio> tag and its associated JavaScript API. Pretty slick to work with really. The Surfin' Safari blog has more on HTML5 native media support.