I wrote in my previous post about the approach we took to the IE9 beta launch: partnering with design agencies and interesting customers to build what we believe are some of the most comprehensive HTML5 reference sites on the web today. Over the course of a couple of blog posts, I wanted to delve into a few of my favorite examples and talk about what I think makes them special, as well as highlight how the designers and developers took advantage of some of the new capabilities of HTML5.
The first experience I want to highlight is Never Mind the Bullets, an interactive comic book set in the Wild West. It comes from Steaw Web Design, a small Paris-based web studio who I met for the first time back in May. Steaw had done some early prototypes with using parallax-style effects with layered images and were keen to see whether they could create a complete experience using that technique. They pulled it off very nicely indeed with the final project, which also takes advantage of the WOFF font format for the comic-style typography and SVG for graphical effects.
You read the comic left to right by simply panning the mouse cursor across to the right side. Each panel of the story is composed out of a series of several transparent or alpha-blended PNG images that are overlaid onto a JPEG background. For example, in the panel above there are separate images for the cowboy, the steam from the train, the traincar, and the passengers. The speech bubbles are created out of an SVG shape with real text rendered using a WOFF display font that is loaded through the @font-face CSS attribute (with fallback solutions for browsers that don’t yet support WOFF).
All these elements are simply positioned using inline styles within a <div> element that represents the panel itself, as shown in this example (edited for brevity and formatting):
<div class="Panel" style="width: 723px; height: 700px;">
<div class="Layers In">
<img class="Layer" style="left:-95px; top:-75px" src="soif-5.jpg"
cp:y="50" cp:x="50" />
<img class="Layer" style="left:-127px; top:-75px" src="soif-4.png"
cp:y="70" cp:x="100" />
<img class="Layer" style="left:-190px; top:-75px" src="soif-3.png"
cp:y="100" cp:x="200" />
<img class="Layer" style="left:-444px; top:-75px" src="soif-2.png"
cp:y="100" cp:x="600" />
<div class="Layers Out">
<p class="Balloon" cp:text="Little" cp:balloon="Tell"
style="left: 74px; top: 35px; width: 280px; position: absolute">
He's come to the west; the land of opportunity.
<div class="Layer" cp:y="100" cp:x="550"
style="left: -575px; top: -100px; width: 900px; height: 900px">
<p class="Balloon" cp:text="Medium" cp:balloon="Speak" cp:arrow="BottomLeft"
style="left: 530px; top: 200px; width: 280px; position: absolute">
I need a drink.
The magic of the comic comes from its interactivity, and here Steaw used a clever technique. Each panel element (the cowboy, the traincar etc.) is extended with several custom attributes (prefixed with “cp:”) that contain metadata on how it should be rendered and the depth of field for the parallax effect.
For rendering purposes, the browser itself ignores these custom attributes since they don’t have any defined semantics. But in the $.fn.parallax() function (found in parallax.js), these attributes are read out and used to generate a displacement value that is applied using a callback on the mousemove event, as can be seen below (again, slightly edited):
var $this = $(this);
var pos = $this.offset();
var mouseX = event.clientX - pos.left;
var mouseY = event.clientY - pos.top;
var containerDemiWidth = $this.width() / 2;
var containerDemiHeight = $this.height() / 2;
var centerX = containerDemiWidth;
var centerY = containerDemiHeight;
var displacementX = Math.min(1, Math.max(-1, (mouseX - centerX) /
(containerDemiWidth - settings.xMargin)));
var displacementY = Math.min(1, Math.max(-1, (mouseY - centerY) /
(containerDemiHeight - settings.yMargin)));
var $layer = $(this);
var rect = $layer.data("rect");
var xFactor = $layer.attr(settings.xFactor);
var yFactor = $layer.attr(settings.yFactor);
var x = Math.round(centerX - displacementX * (-xFactor) /
100.0 * (rect.centerX - centerX));
var y = Math.round(centerY - displacementY * (-yFactor) /
100.0 * (rect.centerY - centerY));
The resultant effect is very polished and fluid. Open it in Internet Explorer 9, hit F12 to bring up the developer tools and browse around the code – they make heavy use of jQuery but the whole site is a surprisingly small amount of code.
The piece de resistance is that you can customize your own comic strip with the link at the top. Because they’ve used SVG and text for the speech bubbles, it was relatively easy for them to implement this feature, and you can share your own comic strip with others via email, Facebook or Twitter.
Never Mind the Bullets is receiving a good reaction from the community so far:
- It was shortlisted for the FWA Site of the Day award;
- Smashing Magazine featured it in their newsletter;
- The Next Web called it “pretty damn cool”;
- Even John Gruber (not known for his love of Apple competitors) linked to it on Daring Fireball.
Check it out (even if you’re not using Internet Explorer 9) – I’m interested in your thoughts!