The travel of a medieval knight through fullscreen DOM. The ‘making of’ the demo that has won the November Dev Derby.

Technologies used:

• Fullscreen API
• Canvas
• Google Maps
• Audio HTML5
• Font-face
• jQuery:
  • Latest jQuery version
  • Scrollpath by Joel Besada
  • jQuery-FullScreen by Martin Angelov

Markup And Style

Markup and style are organized in this way:

• An external wrapper that contains everything
• Three controls boxes with fixed positions and high z-index
• An internal wrapper that contains the Google Maps iframe, canvas path and 8 div elements for the story

The external wrapper and control boxes

The external wrapper contains:

• The audio tag with ogg and mp3 sources, on top left;
• The div which is populated with fullscreen switcher if the browser supports it, on top right;
• The navigation with numbers to move through the canvas path, on bottom right.

  

  

  

  

    
1
    
2
    ...
  

The internal wrapper

The internal wrapper contains:

• The iframe with the big Google Map embedded, absolutely positioned with negative x and y;
• A div of the same size and the same absolute position of the map, but with a bigger z-index, which has a “background-size: cover” semi-transparent image of old paper to give a parchment effect;
• The canvas path (once activated the javascript plugin, it will be drawn here);
• The 8 divs that tells the story with texts and images, absolutely positioned.

  
  


  

    
    
‡ Story of a Knight ‡
    † Of Venetian lagoon AD 1213 †
  

  

    He learnedthe profession of arms
in an Apennines' fortress.
    
  
  ...

JavaScript

The Scrollpath plugin

Available at https://github.com/JoelBesada/scrollpath

First we need to embed the jQuery library in the last part of the page

Then we can call the scrollpath.js plugin, the demo.js where we give the instructions to draw the canvas path and initiate it, the easing.js to have a smooth movement (also include the scrollpath.css in the head of the document).

Let’s see the relevant parts of the demo.js file:

1. At the beginning there are the instructions for drawing the path, using the methods “moveTo”, “lineTo”, “arc” and declaring x/y coordinates;
2. Then there’s the initialization of the plugin on the internal wrapper;
3. Finally there’s the navigation implementation with smooth scrolling.

$(document).ready(init);

  function init() {
  /* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */

  var path = $.fn.scrollPath("getPath");
  // Move to 'start' element
  path.moveTo(400, 50, {name: "start"});
  // Line to 'description' element
  path.lineTo(400, 800, {name: "description"});
  // Arc down and line
  path.arc(200, 1200, 400, -Math.PI/2, Math.PI/2, true);
  ...

  // We're done with the path, let's initiate the plugin on our wrapper element
  $(".wrapper").scrollPath({drawPath: true, wrapAround: true});

  // Add scrollTo on click on the navigation anchors
  $(".navigation").find("a").each(function() {
    var target = this.getAttribute("href").replace("#", "");
    $(this).click(function(e) {
      e.preventDefault();

      // Include the jQuery easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/)
      // for extra easing functions like the one below
      $.fn.scrollPath("scrollTo", target, 1000, "easeInOutSine");
    });
  });

  /* ===================================================================== */
}

The jQuery-FullScreen plugin

Available at https://github.com/martinaglv/jQuery-FullScreen

To cap it all, the fullscreen. Include the jQuery-FullScreen plugin, then verify with a script if the browser supports the functionality: in case yes, it will append the switcher on the top right corner; then initialize it on the external wrapper to push everything fullscreen.

Summary

The hardest part was to figure out which size/zoom level give to the Google Maps iframe and then where to position it in relation to the div with the canvas.
The other thing that has reserved some problems was the loading time: I had initially placed the video of a medieval battle in slow-motion along the path, but then I removed it because the page was loaded too slowly

As you have seen everything is very simple, the good result depends only on the right mix of technology, storytelling and aesthetics. I think that the front-end is entering in a golden age, a period rich of expressive opportunities: languages and browsers are evolving rapidly, so there’s the chance to experiment mixing different techniques and obtain creative results.