Click here to watch the CSS animation inspired by the Mad Men show opening credits. I’ve updated it with some simple GPU optimizations and auto-play once loaded. Compare the CSS animation to the original opening credits on YouTube.
––– UPDATED: January 31, 2020
You Call This Inspiration?
Imagine Don Draper walking into the office. His suitcase swings in his hand. His brand new Adidas squeak against the polished floor… Eh!? Adidas?
I love Adidas. This is the idea that popped into my head while watching the intro sequence to the Mad Men show. “Wouldn’t it be cool to re-create the Mad Men intro, but replace the man’s shiny shoes with a pair of classic Adidas?”
It was that ridiculous thought that gave me the idea for a CSS3 Mad Men intro. Dumb right? ?
I got to work.
Splitting the Scenes
The first task was to locate a high-quality version of the intro on youtube. After studying it closely I realized it could be duplicated easily using simple CSS3 animations.
Every time the camera angle changed, that would make a new scene. I paused the play head at the start and end of every scene and grabbed an image of both. This gave me “before and after” images for each scene. I would paste these on individual layers into a Photoshop file. Repeating the process until I had 16 .psd files (16 scenes) with a “before and after” layer in each one.
Duplicating the Graphics
I began drawing over the images I previously grabbed. Scenes 1 through 6 were pretty straight forward. I created shapes over the original images trying to duplicate the objects form, color and texture as closely as possible.
As I drew each graphic I had to be mindful of how I was going to animate them.
For instance, Scene 5, where the office collapses, has many moving pieces. By keeping Photoshop open on one screen and the mad men intro open on another. I was able to focus on a specific object and determine how many moving pieces each one needed.
Take the desk for example. If you look at the original intro closely you’ll see the desk falls apart into pieces as it slips down. By watching the desk pieces move I could determine which pieces obscured the others as they fell and I could start planning the html and stacking order of the graphics. It was a meticulous process and admittedly you have to be a bit nuts to undertake it. *Ahem*
Drawing the buildings that fly by as the silhouette falls wasn’t so fun. I ran into a little creative block with them. I wasn’t sure who or what I was going to place behind the glass. And I couldn’t figure out a good way to replicate that washed-out, hazy look the buildings have in the original.
Rather than get hung-up on the buildings. I figured I would draw basic shapes for them and match the perspective of the buildings. That way they would look as believable as possible when they where moving behind the falling silhouette. Later I could circle back to the buildings once I hammered out all the CSS3 animation.
I posted a little preview of the graphics to dribbble.
A Multinational Alliance
Enter Andy Clarke and Geri Coady. I worked with Andy and Geri previously on a CSS3 animation for his excellent book ‘Hardboiled Web Design by Andy Clarke‘. And I was stoked to be working with them again on this project.
The buildings I created sucked but ultimately served as a good foundation for Geri Coady’s artwork. She was able to create some incredible graphics of the ALA speakers. There is excellent design/photoshop work in those building panels. They merit close attention. Hopefully Geri will write a post on her site detailing how she created those amazing effects.
Hand Chiseled
The code for the animation is composed from an ordered list with 16 list-items. Within each list-item is all the html and images necessary for that particular scene. By default all these list-items are set to display: none.
We have a bit of jQuery that applies a “go” class to each list-item for a specific amount of time. This “go” class sets the list-item to display:block and activates the CSS3 animation assigned to that list-item (scene).
Once the specified amount of time has elapsed. The “go” class is removed from the list item. Setting it back to display: none, turning off the CSS3 animation and immediately applying the “go” class to the next list item in the order. Starting the whole chain of events again.
The code for the animation elements is ugly un-semantic html. But hey, sometimes you just have a good plan and say “fuck it”.
Hardboiled HTML
Andy had a plan for the ugly code. Browsers that didn’t support CSS3 animations will see an ordered list with an image and descriptions of each scene in the animation.
If the browser supports CSS3 animations we’ll use modernizr to replace each image and description with the html elements necessary for the animation. Simple!
Remember to click here to watch the CSS animation inspired by the Mad Men show opening credits. It has been updated with simple GPU optimizations and auto-play. Compare the CSS animation to the original opening credits on YouTube.
––– UPDATED: JUNE 6, 2019