During my recent JavaScript capstone course at Westlake, I got an idea. We were doing an exercise on animation, using things like JavaScript’s setTimeout and adjusting the CSS clip property on a few divs. For some reason one of the blocks reminded me of the animation at the beginning of all Marvel movies, when it looks like someone is flipping rapidly through a bunch of comic pages. I envisioned being able to accomplish this animation using only JavaScript.

Here’s a sample of the original animation, from the Spider-Man intro. I also found a few samples of other obviously homemade versions of the Marvel intro, like this After Effects version.

The below is built using JavaScript only, and relies heavily on jQuery’s animation effects. There’s even a cool soundtrack for those with newer browsers (its embedded using HTML 5’s audio element). The font isn’t exactly the same, and the music is courtesy of Dredg (everyone go out and pick up “The Pariah, The Parrot, The Delusion” right now), but I think its as close as you can get with JS to the original. Click the play button to check it out.

If you’d like to see a tutorial for how this was accomplished, leave a comment. If I get enough requests, I’ll put together a how-to.

Play

Tags: JavaScript, jQuery, Marvel cinema intro

This entry was posted on Saturday, November 14th, 2009 at 12:28 pm and is filed under Creativity, JavaScript, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.