Question

I am wondering if it is possible to adapt this HTML5 technology in 2D, such that e.g. we could use the arrow keys to navigate a 3 by 3 slides grid.

If so, could you indicate a source?

Answer 1

There is a plugin written long time ago:
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
that allows you to do what you desire with JavaScript:
http://demos.flesler.com/jquery/scrollTo/

This is a brief outline of what you could do with this plugin:

(function () {

  // find a current slide by whatever way you want, 
  // i.e. first slide or one that has some class or something...
  var container = $('.container'), 
      currentSlide = container.find('.slide:first');

  $(document).bind('keydown', function(e) {
    var code = e.keyCode || e.which;
    // 37 – left arrow
    // 39 - right arrow
    // 40 - down arrow
    // 38 - up arrow
    if ( code === 37 || code === 39 || code === 38 || code === 40 ) {
      e.preventDefault();

      switch ( code ) {
        case 37 :
          container.scrollTo ( currentSlide.prev(); );
          break;
        case 39 :
          container.scrollTo ( currentSlide.next(); );
          break;
        case 38 :
          container.scrollTo ( // implement finding one that is above );
          break;
        case 40 :
          container.scrollTo ( // implement findign one that is below );
          break;
    }
  });

} ());

Note that your container will need to have overflow:hidden and dimensions set on it from CSS (or of course you can do that from JS if you want to). You can find all requirements in plugins page.