讲故事与叙事2011hobolobo.net
用 HTML 和 JavaScript 实现的巧妙叙事
Very clever story telling using HTML and Javascript...
导读
这是一则展示用 HTML/JavaScript 做网页讲故事的帖子：读者需要横向滚动才能看到动画和后续图片，网页的交互形式本身成了叙事的一部分。对写作者来说，它值得读的地方在于提醒我们，媒介操作、视觉节奏和读者参与方式也会影响故事怎么被读。评论还补充了儿童平板应用、配音选项和制作成本等现实考量。
可以直接用的写作要点
- 01
把读者的滚动、点击等操作设计成叙事节奏的一部分，而不只是把文字堆在页面上。
- 02
每一屏或每一页只安排一个主要视觉动作或信息点，让动画和图片随着横向滚动依次揭示。
- 03
面向儿童等特定受众时，可以考虑配音等辅助通道，但要先评估整体制作成本。
- 04
形式创新要服务于故事核心；如果滚动卡顿或操作复杂，会打断读者的阅读体验。
HN 评论精选
横向滚动是读者观看内容的前提，交互方式直接决定了故事的呈现节奏。
每一页都必须使用水平滚动条，才能看到动画和其余图片。
silvestrov查看英文原文
For each page, you must use the horizontal scrollbar to see see the animation and the rest of the images.
多媒体故事很适合儿童平板，配音能增强体验，但制作成本很高。
看起来真的很酷。这会是一个很棒的儿童平板应用。如果有配音选项就更好了。不过看起来要把这些整合起来工作量很大。
jpdelatorre查看英文原文
Looks really cool. This would be an amazing tablet app for children. +1 if there's a voice over option. Although it seems a LOT of work to put together.
滚动叙事的流畅度很关键，渲染卡顿会破坏阅读节奏。
我在做类似的东西，不过用的是游戏式渲染器：所有可见元素以每秒30帧渲染，不再操作 DOM，而是直接把 HTML 文本写入 innerHTML，并剔除不可见元素。这样能避免链接页面滚动时那种轻微的卡顿。
mambodog查看英文原文
I am working on something similar to this, though I've implemented a renderer like that of a game, with all visible elements being rendered at 30 fps, foregoing DOM manipulation for writing HTML text directly to innerHTML[1], and culling non-visible elements. This avoids the slight jerkiness that exists when scrolling on the linked page. [1] http://www.youtube.com/watch?v=_RRnyChxijA&t=22m56s
同类还值得读
Pixar in a Box：可汗学院的皮克斯讲故事课
Pixar in a Box – Khan Academy
这篇是 Khan Academy 与 Pixar 合作的“Pixar in a Box”项目介绍，用计算机图形和动画制作来讲解数学概念。
讲故事与叙事2015 · 753 分 · 65 评4 条写作要点编辑精选皮克斯的讲故事法则
Pixar's Rules of Storytelling (2013)
这是皮克斯动画工作室流传甚广的 22 条讲故事法则清单，从“从前有个___，每天___，有一天___”的骨架，到如何重写自己讨厌的作品。
讲故事与叙事2018 · 513 分 · 74 评4 条写作要点编辑精选皮克斯通过可汗学院提供免费在线讲故事课程
Pixar offers free online lessons in storytelling via Khan Academy
这篇报道介绍皮克斯与可汗学院合作的免费在线课程《讲故事的艺术》，把皮克斯内部的故事创作方法公开给普通学习者。
讲故事与叙事2017 · 503 分 · 93 评4 条写作要点编辑精选用皮克斯的故事公式说服投资人
Use Pixar's story formula to win over investors
这篇文章借用皮克斯的故事公式（以《海底总动员》为例）来示范如何给投资人讲创业路演故事：先讲目标、再讲障碍、最后讲改变。
讲故事与叙事2021 · 439 分 · 188 评4 条写作要点编辑精选贝索斯如何把叙事变成亚马逊的竞争优势
Jeff Bezos Turned Narrative into Amazon's Competitive Advantage
这篇讲杰夫·贝索斯如何把“六页叙事备忘录”变成亚马逊的管理与竞争优势：用可独立阅读的叙述性文档替代口头汇报和 PowerPoint。
讲故事与叙事2019 · 435 分 · 181 评4 条写作要点编辑精选