SuperAPI AI 工具集

scrollytelling

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:构建滚动驱动的叙事体验,让视觉与文字元素随用户滚动出现或变化,形成沉浸式故事。资料称其可提升页面停留时长、信息记忆与分享率,但未提供具体验证来源。

主要能力:支持固定区块(pinned sections)、渐进揭示、滚动联动动画;总结五种标准技法:图形序列、动画过渡、平移缩放、逐帧电影式滚动、滚动触发交互。提供四种布局模式:并排粘性、全宽分区、分层视差、多方向滚动。

使用方式:先明确叙事模式与技术栈(React、Next.js、Vue、原生 JS 等),再选择动画方案:原生 CSS scroll-timeline、IntersectionObserver、GSAP ScrollTrigger、Motion(Framer Motion)、Lenis 等。资料给出 CSS 滚动驱动动画、IntersectionObserver、GSAP、Motion 的示例代码与滚动进度 Hook。

适用场景:长文多媒体报道、品牌故事、产品功能页、时间线/历史内容、需深度说明的高考虑度产品。

限制与注意:缺乏强视觉素材、时间预算紧、内容简短、无明确时间线或低端设备性能关键时不宜使用。必须支持 prefers-reduced-motion,视差可能引发前庭不适;需满足 WCAG 相关条款,保证键盘与屏幕阅读器可用。移动端建议优先设计,视口单位推荐 svh,慎用 dvh。性能上应使用 transform/opacity、passive 滚动监听、position: sticky,避免动画 width/height/top/left。具体安装命令与官方文档暂未提供。