滚动叙事体验

解决的问题

当页面只是纵向堆叠模块时，用户很快进入机械阅读：文案、卡片、图表反复出现，缺少节奏和强调。滚动体验适合解决这类问题：把滚动当作叙事手段，让首屏钩子、上下文、过程、高潮和结论按滚动深度展开，而不是依赖鼠标点击或复杂手势。

技能如何工作

该技能把前端滚动体验拆成几类可落地的模式：

• 滚动驱动动画：用 GSAP ScrollTrigger 的 scrub 把元素位移、透明度与滚动位置绑定，适合做进入揭示和轻量视差。
• 视差叙事：背景、中层、前景以不同速度移动，形成空间感；也可用 Framer Motion 的 useScroll 与 useTransform 做更组件化的处理。
• 吸顶与吸附：通过 CSS position: sticky 或 ScrollTrigger 的 pin 固定区块，常见于步骤说明、横向面板和进度指示。
• 交互边界：优先保持自然滚动，避免劫持滚动、过度动画和只考虑桌面端；移动端需要更简洁效果与真机降级。

它不是替代完整设计系统，而是帮工程师在已有页面里加入有节奏的滚动瞬间。