Inside an HTML5 Interactive Experience: Never Mind the Bullets

Inside an HTML5 Interactive Experience: Never Mind the Bullets

  • Comments 17

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.

image

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>
   <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.
    </p>
    <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.
     </p>
    </div>
   </div>
  </div>

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):

self.each(function() {
  var $this = $(this);
  
  $this.mousemove(function(event) {
    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)));
 
    $this.children(".Layers").children(".Layer").each(function() {
      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));
 
      $layer.animationMoveTo(x, y);
    });
  });
});

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.

image

Never Mind the Bullets is receiving a good reaction from the community so far:

Check it out (even if you’re not using Internet Explorer 9) – I’m interested in your thoughts!

  • Microsoft is to emerging web as Apple is to open source.

  • @Ricardo - Dialog is no longer in the spec (don't quote on me on this but I seem to remember it was because Microsoft said they wouldn't implement it).

    @Tims - We do have other term(s) for 'HTML5' the marketing term. How about 'Open Web Standards', 'Web Standards', 'HTML5 & related technologies' or how about 'Emerging web technologies' (in fact did you say that yourself in a comment - I can't see because of the paginated comments).

    More importantly though while HTML5 is used as an umbrella term for marketing types, your audience on this blog is hardly those people. You're talking to developers that are in the trenches, who understand what HTML5 is so I'd expect you to be able to correctly define the technologies here.

    Finally, like Bruce & Shelley I'm interested as to why no data-* attributes?

Page 2 of 2 (17 items) 12