workbuddy_skills/oil-ui-pro/references/scroll-narrative.md

滚动叙事

落地页的滚动动效

落地页、品牌页、产品发布页和展览页，滚动动效和 动效 的三处基本动效一起验收；文档、文章、工具和后台不做。用成熟的动效库实现，见下文“动效库”。

必须有两样：首屏以下的区块按内容出场；至少一段滑动驱动的叙事，主角在滚动里发生明显变化。手法按页面挑：首屏景深、字标收进导航、一镜到底、章节转场镜头、背景随章节变色、宣言逐字亮起，从这个页面的主视觉和内容里选合适的，写进分镜并说明为什么选它。下面先说首屏景深，它是首屏有主视觉和大标题时最常用的一种。

首屏景深（适合首屏有主视觉和大标题的页面）

首屏是一个固定住的舞台，滚动直接驱动里面的层次变化，往回滚就倒放：

• 首屏固定 100–200vh 的滚动距离，窄屏可缩到 80–120vh。
• 至少两层以不同速度、不同方向变化。最常用的是主视觉和大标题反向缩放：主视觉从 1 缩到 0.8，标题从 1 放大到 1.25；或者反过来，主视觉推近、标题后退。背景层动得最慢，前景层最快。
• 幅度要大到录屏里一眼看出来：主层缩放不少于 15%，或位移不少于 15vh。小于这个幅度，看起来就是页面在普通滚动。
• 大标题是图形层，可以缩放和视差；正文、按钮和表单不缩放、不做视差，固定后保持可读可点。
• 结束状态要交接给下一节：主视觉缩到下一节的位置，标题退成背景纹理，或者画面让出一条路给下一节的主角。不要固定结束后整块直接被推走。

首屏是满版的品牌字标时，用下面的“字标收进导航”。首屏是其他满版文字、产品界面或纯排版时，不一定适合景深，可以把滑动驱动的叙事放在后面。

字标收进导航（适合首屏是满版品牌字标的页面）

首屏就是品牌名本身，滚动时它缩成导航栏里的标志。它用一个元素同时完成满版文字骨架和一段滑动驱动的叙事，适合品牌名短、字形有性格的工作室、品牌和作品集：

• 首屏只有这一个字标，撑满版心宽度，窄屏也保持一行撑满；导航里不再放第二个标志。
• 滑动驱动，滚过 60–100vh，字标沿一条路径缩到导航标志的位置和尺寸，往回滚放大回来。结束状态就是导航里的标志，位置和尺寸按导航实际量出，交接时不跳。
• 缩放同一个元素的变换，不动画字号；字标用 SVG，或按容器宽度算出的字号。
• 字标让出首屏的同时，下一节内容已经进入画面，不留一整屏空白。
• 字标从满版缩成导航标志，是主角明显的缩放和一次交接，算一段滑动驱动的叙事；同一页不再另做首屏景深。
• 减少动态效果时，字标留在首屏不缩放，导航从一开始就显示标志。

区块按内容出场（必须，滑动触发）

首屏以下的每个区块，滚到位置时出场一次，往回滚不重播。出场方式从这个区块的内容和材质推出来，并且符合物理直觉：有重量的落下会过冲后稳住，轻的东西有空气阻力，机械的东西咔嗒到位。

区块内容	出场方式
卡片、实物、价格牌	带重量落下后稳住，过冲幅度见 动效 的“手感”；后一张被前一张带出
列表、时间线、步骤	沿阅读方向依次展开，连接线先画出，节点随后落位
数字、指标	滚到目标值，高位先停、末位后停；不从 0 起跳的用原值起滚
线条、图表、路径	沿数据或流程的方向描出，端点落定时轻微放大一下
图片、照片	遮罩从画面主体的方向揭开，图片同时从 1.08 回缩到 1
纸、布、标签	先快后慢，带一点旋转后摆正，像被放到桌上
金属、机械、硬件	短促到位，没有软弹，可以带一次很小的回震
大标题、口号	按词或按行从遮罩里升起，字距从略松收紧

规则：

• 每个区块的出场写进分镜。同一页最多两个区块用同一种出场。
• 曲线用弹簧或惯性，参数从 动效 的“手感”表里按材质取，不用默认的 ease。
• 主角先到，其余被带出，间隔 40–80ms，单个区块的出场总长不超过 900ms。
• 全页每个区块套同一个淡入上移，不算完成这一层。

滑动驱动的叙事（必须至少一段）

可以是首屏景深、字标收进导航，也可以是页面中段一段一镜到底，规则见下一节。主角必须在滚动里发生明显变化：缩放、拆解、变形、穿过或形状接力。一个小点沿着线移动、节点逐个点亮，只能算主叙事里的一个细节，不能单独当作主叙事。

分镜

动手前在方向卡的“动效”一栏写出滚动分镜：选了哪些手法、为什么，每一段占多少滚动距离、主角是谁、每个镜头画面里有什么、什么在动、往哪个方向、文字什么时候出现。先拆两个同类顶级落地页的滚动节拍作参照，写清它们每一段在动什么，再写自己的。

视差与一镜到底

• 一镜到底。 整段是一次不切换的镜头。一个主角从头走到尾，可以是产品、一根线、一个形状或一个字，每一步长成、变成或让出下一个画面：推近看到细节，拉远看到全貌，转过去看到背面，穿过去进入下一个场景。
• 主角从产品里找。 主角是这个产品处理的那样东西，在滚动里走完它自己的过程。找不到只属于这个产品的主角时，退回下面的转场手法，不用通用的漂浮几何。
• 停下来再说话。 每个镜头留一段静止，文字在静止时出现；边动边读很累。
• 视差要有真实的前后。 只在画面本来就有远近层次时用：前景的物体、中景、远处的背景，越近动得越多，差别要小。正文、按钮和表单不做视差；大标题作为图形层时，按上面的首屏景深处理。
• 转场也是镜头。 一个圆从某一点扩开，带出下一节；推进一张图，穿过它到达下一节；背景色在章节之间随阅读慢慢变；一句宣言随滚动逐字亮起。每种手法一页只用一次。
• 倒着滚也成立。 每一帧只由滚动位置决定，往回滚自然倒放，刷新或跳到中间也立刻是对的画面。不接管用户的滚动。
• 留出口。 长段落前给一个跳过入口；减少动态效果时，把每个静止画面按顺序排成普通区块。
• 代码做不出来的，交给视频。 用户想要很强的首屏动画，而效果要靠生成视频或序列帧才做得出来，例如角色转身、产品拆解、镜头穿越场景，可以告诉用户用 oil-motion 来做。CSS、SVG、着色器能完成的仍自己做；同一次对话只提一次。

滚动交互的两种模式

滚动带来的变化分两种模式：

• 滑动驱动（Scroll-Driven）。 动画进程与滚动距离严格 1:1 映射（Scrub）。用户停下则动画停下，往回滚则倒放。首屏景深、一镜到底、3D 视角变换和模型解构只用滑动驱动；除首屏景深外，一镜到底一页最多一段。
• 滑动触发（Scroll-Triggered）。 元素滚入视口阈值时，触发一段按自身时长播放的独立动画（如卡片进场、数字上涨）。它什么时候播完由代码决定，不跟着滚动条走。
  • 默认单向一次性（Once）。 触发后样式固定，用户向上回滚不重播、不复位，不在阅读中途让内容反复飞入或闪烁。
  • 离开重置（Reset on Leave）。 只有强节奏的纯展示页才允许在完全移出视口后重置，不在视口临界点反复触发。

平滑滚动与全屏分段

• 平滑滚动只管滚起来顺不顺，不算动效。 用 Lenis 这类库，是为了消掉鼠标滚轮一格一格的跳动，让滑动驱动的动画和视差走得均匀。后台、仪表盘、表单和长文档不开全局平滑滚动，保持原生滚动的即时响应。
• 慎用全屏分段滚动（Snap Scroll）。 隐藏滚动条、单次滑动切换整屏的做法只适合特定的全屏展厅与作品封面，常规业务和长文本不用。

动效库

落地页的滚动动效必须用成熟的动效库，不手写滚动监听和逐帧计算：

• 没有框架的页面：GSAP，滚动用 ScrollTrigger（scrub 做滑动驱动，once 做滑动触发，pin 固定舞台），大标题拆字用 SplitText，元素换位置用 Flip。平滑滚动用 Lenis，并接进 GSAP 的时钟：lenis.on('scroll', ScrollTrigger.update)、gsap.ticker.add((t) => lenis.raf(t * 1000))、gsap.ticker.lagSmoothing(0)。GSAP 和它的插件都可以免费使用。
• React、Vue 等项目：沿用项目已有的动效库（Motion、GSAP 等）；没有时加 GSAP，不另外手写一套。
• 需要离线打开的作品：把库文件按固定版本放进作品目录，从本地引用，不依赖 CDN。
• 减少动态效果：用 gsap.matchMedia() 分开两套：减少时不固定、不缩放，所有区块直接到位，主叙事排成按顺序的静止画面。
• 只动变换、透明度和滤镜。固定舞台的外层高度就是这段的滚动距离；离屏的动画由库自动暂停。窄屏可以缩短距离、降低幅度，但选定的手法都要保留。

检查

从头滚到底，再滚回去，各看一遍：往回滚是否倒放、跳到中段刷新画面是否正确、文字是否在静止时出现、窄屏选定的手法是否都在、开启“减少动态效果”后是否所有内容直接可读。