用途:当滚动本身就是解释的一部分,而不只是导航时使用本技能。滚动叙事是作者主导的叙事结构,读者滚动时文字、数据标记、图像、视频、地图或相机状态随之变化;视差是其中一种技术,让图层以不同速率移动以产生深度、揭示尺度或关联前后景。默认保留原生滚动,并让每个场景作为静止画面仍有意义,不把视差或滚动擦洗动画当装饰。
主要能力:覆盖时间线、地图、图表、3D、视频等分批揭示;支持粘性图形、文字与视觉并排、媒体叠加文字、滚动擦洗过渡;涉及 Scrollama、GSAP ScrollTrigger、Motion useScroll、CSS ScrollTimeline、ViewTimeline、IntersectionObserver、position: sticky、parallax 图层、moviescroller 等。技能内提供故事契约、场景建模、技术选型、浏览器契约保护、无障碍与回退、性能与解读测试等指导,并可路由到可视化策略、React/Next.js、D3、Canvas2D、Three.js、地理可视化、无障碍和测试等相关技能。
使用方式:先定义一句话结论、作者主导序列、滚动必要性及各关键帧要证明什么;选择图形序列、动画过渡、平移缩放、moviescroller、视差层、粘性并排或移动端回退等技术;把场景建模为数据;按复杂度选择最轻实现,如原生滚动加 sticky、IntersectionObserver、CSS 滚动驱动动画,或 Motion/GSAP 等。
适用场景:时间线、地图、图表、3D、视频需随滚动分批揭示;需要作者主导的线性路径;粘性图形或滚动驱动过渡。
限制:不适合用静态图表、小多图、常规图文或明确步进器更清楚的情况;需遵守偏好减少动态、提供静态关键帧或分步回退,保持焦点与阅读顺序,避免滚动劫持、意外自动播放音频,并测试移动端浏览器栏、触控惯性和性能。具体实现细节与效果暂未提供。