一位中世纪骑士在全屏 DOM 中的 旅程。这个演示获得了 11 月 Dev Derby 的冠军，本文将讲述它的制作过程。

使用到的技术

• 全屏 API
• 画布
• 谷歌地图
• HTML5 音频
• 字体面
• jQuery:
  • 最新版本的 jQuery
  • Joel Besada 编写的 Scrollpath
  • Martin Angelov 编写的 jQuery-FullScreen

标记和样式

标记和样式的组织方式如下

• 一个包含所有内容的外部包装器
• 三个具有固定位置和高 z-index 的控制框
• 一个包含 Google 地图 iframe、画布路径和 8 个用于故事的 div 元素的内部包装器

外部包装器和控制框

外部包装器包含

• 带有 ogg 和 mp3 源的音频标签，位于左上角；
• 如果浏览器支持，该 div 将填充全屏切换器，位于右上角；
• 带有数字的导航，用于在画布路径中移动，位于右下角。

  

  

  

  

    
1
    
2
    ...
  

内部包装器

内部包装器包含

• 嵌入大型 Google 地图的 iframe，绝对定位，带有负 x 和 y；
• 与地图大小和绝对位置相同的 div，但具有更大的 z-index，它具有一个“background-size: cover”半透明的旧纸张图像，以提供羊皮纸效果；
• 画布路径（一旦激活 javascript 插件，它将在这里绘制）；
• 8 个包含文本和图像的 div，绝对定位。

  
  


  

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

  

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

JavaScript

Scrollpath 插件

可在 https://github.com/JoelBesada/scrollpath 获取

首先，我们需要在页面的最后部分嵌入 jQuery 库

然后，我们可以调用 scrollpath.js 插件，demo.js，我们在其中提供绘制画布路径和启动它的指令，easing.js 用于实现平滑的移动（还将 scrollpath.css 包含在文档的头部）。

让我们看看 demo.js 文件的相关部分

1. 在开头，使用“moveTo”、“lineTo”、“arc”方法和声明 x/y 坐标来提供绘制路径的指令；
2. 然后，在内部包装器上初始化插件；
3. 最后，实现带有平滑滚动的导航。

$(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");
    });
  });

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

jQuery-FullScreen 插件

可在 https://github.com/martinaglv/jQuery-FullScreen 获取

最后，全屏。包含 jQuery-FullScreen 插件，然后使用脚本验证浏览器是否支持该功能：如果支持，它将在右上角添加切换器；然后在外部包装器上初始化它，以将所有内容推送到全屏。

总结

最困难的部分是确定 Google 地图 iframe 的大小/缩放级别，以及如何相对于带有画布的 div 定位它。
另一个导致一些问题的是加载时间：我最初在路径上放置了一个慢动作的中世纪战斗视频，但后来我删除了它，因为页面加载速度太慢。

如您所见，一切都非常简单，良好的效果取决于技术、叙事和美学的正确组合。我认为前端正在进入一个黄金时代，一个充满表达机会的时期：语言和浏览器正在快速发展，因此有机会尝试混合不同的技术并获得创造性的结果。