固定式滚动叙事 · Sticky Scrollytelling
英文：Sticky Scrollytelling
动效与交互难度：入门 ★
🗣️一句话大白话
画面固定不动（sticky），文字或背景随滚动变化，像“滚出来的故事”。长图文、品牌故事、数据报告最爱的叙事形式。与普通滚动不同：滚动时某个视觉主体被固定（position: sticky），文字/数据/画面分阶段切换。关键在“阶段对应”：滚动 0-30% 讲第一幕、30-60% 第二幕……告诉 AI 每幕的滚动区间和切换内容。做不好会“画面不动很怪”，要确保至少有一个元素在随滚动变化。
🎬真实场景
品牌故事、产品长介绍、数据叙事、教程长图文
📮你可以这样说
「【图像模型版】设计固定式滚动叙事：主体画面 [插图] 固定在屏幕中央，随滚动切换 3 个阶段（0-30%/30-60%/60-100%），每阶段配一句标题和一段说明。 【HTML/CSS/JS 版】[主体] position: sticky + top: 50vh；监听滚动进度 0-1，按 [3] 个阶段切换文字内容（可用 CSS 或 JS 切换 class）。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：sticky 只是“固定不动”；叙事的关键是“固定+随滚动换内容”
- ▸全程画面完全不动=失效，至少一个元素要随滚动变化
🚫什么时候别用
- ✗用户要快速获取信息的页面
- ✗移动端过长段落（滚动成本高）
🧩常见变体
画面固定+文字切换文字固定+画面切换画布随滚动绘制
💡小贴士
- ✦每幕配滚动进度提示，用户才不迷路；移动端减幕数
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（中篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗