Marvel Cinema intro built using only JavaScript

Jeff — Sat, 14 Nov 2009 17:28:39 +0000

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.

Withinsight » Marvel cinema intro

Marvel Cinema intro built using only JavaScript

Marvel