前段时间受到朋友白豆给我展示了一个非常酷炫的网页，用来解释什么是 HTML。它不是那种被动式的、直接告诉你什么是 HTML，而是互动式的，你可以在网页点击查看一个个知识概念，还可以做问答，整个过程相当于让用户主动的参与进来。所以就从他那里偷来了这个方法，他告诉我，这玩意叫做滚动叙事，于是我就去了解了下。
滚动叙事是什么？
现学现卖一下，什么是滚动叙事呢？从名字就能看出来，它是把滚动的交互和叙事的内容结合在一起的网页展示方式。
典型的例子就是苹果的官网，它的每个页面都遵循这样的设计——滚动即交互，用户每次向下滚动，视觉元素会随之变化，内容像画卷一样逐步展开，同时每帧只讲一件事情，让人感觉故事在不断推进。
什么样的场景适合？
第一是演讲场景，有了它之后，你做演讲都不需要搞什么PPT了，直接放一个滚动叙事的网页，还自带交互效果。
第二是营销场景，比如苹果宣传手机的页面，每个功能点只用一帧画面去展示，并且可以动态交互。
第三是学习场景，比如你想学点新知识，比如什么是 Skill，那你就可以用滚动叙事的方式来介绍它，这样我们就不再是被动接受知识，而是主动的学习。
来看个 Demo
来看一下我上周做的这个"什么叫 Skill"的滚动叙事页面。
首先我通过一段交互演示，展示了没有 Skill 的时候，我是怎么完成工作的，这里解释了我为什么需要做 Skill。第二部分介绍了 Skill 的主要构成，你点击文件列表中的每个文件，就可以带交互地查看内容，后面还给大家出了套选择题，可以辅助判断什么场景需要 Skill，加深理解。
最后，知道了什么是 Skill，就要知道怎么做，我在里面模拟了和AI对话的动态交互，让AI帮我生成Skill。
体验网站：skill.mowan.work
怎么做一个滚动叙事的页面？
其实非常简单，你直接对AI说，帮我做个滚动叙事的 HTML 页面就完事了，AI 完全明白这个东西是什么。
这就是我最近探索出来的一个好玩的东西，大家可以去尝试一下，如果做出了好玩的东西，也可以在评论区留言分享。