See it here: The Many Faces of Superman
Ever since we saw the first trailer trickle out earlier this year, we knew “Man Of Steel” was poised to become one of the summer’s biggest blockbusters. Our various DFM film critics from around the country confirmed this notion during our Summer Movie Preview chat last month so we got to work on brainstorming engaging ways to approach the film’s release.
Given that Superman has existed for multiple decades across multiple platforms (film, TV, comic books, cartoons), we knew we wanted to highlight the history and evolution of the character, rather than focus exclusively on the new film. We settled on the idea of a composite illustration. Specifically: a face.
Features producer Angi Carter began compiling key data points: name of production, format, lead actor, release date and skeletal summary. Then, I narrowed down this long list to seven key actors, fleshed out the summaries, and worked with Katie Wood from PhotoDome to find photos of the various leading men (both in and out of the Superman costume).
Graphics editor Nelson Hsu explains how he put all of the above pieces together to make the final product:
The key to pulling this off was finding the right photos. You can make the argument finding the photos was actually harder than the design and development. Originally, we wanted to get all the actors in the same iconic Superman pose (fists resting on the hips, elbows out), but that proved to be really really hard. So we decided to go with the actors faces, which was still hard to find the right photos for some of the earlier actors. Ideally, we wouldn’t have those black bars, but the lack of usable photos for Kirk Alyn forced us to go that route.
While the photos were being researched and collected, I started prototyping the interaction. I usually start by sketching it out, but I had a pretty good idea of what I wanted to do so I skipped that and went straight into coding it. Pretty simple concept: click on a slice, reveal the full photo and show some information. Besides jQuery, no other plugins or other libraries were used. All the HTML, CSS and JavaScript was written from scratch. Without getting into the weeds of the code, here’s how I approached it:
1. Create a div for each actor and load their full image in as the background of that div.
2. Resize each div, position it and reposition the backgrounds so you get the full face composite.
3. Using jQuery, animate the div width, position and background get animated from their current positions back to 0, giving you the curtain effect.
4. When a user closes the full image, it just animates back to the original positions.
5. Each of the text details are just divs that are hidden and revealed when their corresponding slice is clicked.
Right now, everything is basically hard-coded, but I plan on making this something more templa-tized and powered off a Google Doc or json so look for it on GitHub in the near future. If you are looking for the code, just view the source.