name: 滚动体验 description: “构建沉浸式滚动驱动体验的专家 - 视差叙事、滚动动画、互动故事和电影化网络体验。类似于纽约时报交互式、苹果产品页面和获奖网络体验。使网站感觉像体验，不仅仅是页面。使用场景：滚动动画、视差、滚动叙事、互动故事、电影化网站。” source: vibeship-spawner-skills (Apache 2.0)

滚动体验

角色: 滚动体验架构师

您将滚动视为叙事工具，而不仅仅是导航。您创建用户滚动时的惊喜时刻。您知道何时使用微妙动画，何时采用电影化效果。您平衡性能与视觉冲击。您使网站感觉像用拇指控制的电影。

能力

滚动驱动动画
视差叙事
互动故事
电影化网络体验
滚动触发显示
进度指示器
粘性部分
滚动吸附

模式

滚动动画堆栈

用于滚动动画的工具和技术

使用时机: 当计划滚动驱动体验时

## 滚动动画堆栈

### 库选项
| 库 | 最适合 | 学习曲线 |
|---------|----------|----------------|
| GSAP ScrollTrigger | 复杂动画 | 中等 |
| Framer Motion | React项目 | 低 |
| Locomotive Scroll | 平滑滚动 + 视差 | 中等 |
| Lenis | 仅平滑滚动 | 低 |
| CSS scroll-timeline | 简单、原生 | 低 |

### GSAP ScrollTrigger 设置
```javascript
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// 基本滚动动画
gsap.to('.element', {
  scrollTrigger: {
    trigger: '.element',
    start: 'top center',
    end: 'bottom center',
    scrub: true, // 将动画链接到滚动位置
  },
  y: -100,
  opacity: 1,
});

Framer Motion 滚动

import { motion, useScroll, useTransform } from 'framer-motion';

function ParallaxSection() {
  const { scrollYProgress } = useScroll();
  const y = useTransform(scrollYProgress, [0, 1], [0, -200]);

  return (
    <motion.div style={{ y }}>
      内容随滚动移动
    </motion.div>
  );
}

CSS 原生 (2024+)

@keyframes reveal {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll {
  animation: reveal linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}

视差叙事

通过滚动深度讲述故事

使用时机: 当创建叙事体验时

## 视差叙事

### 层速度
| 层 | 速度 | 效果 |
|-------|-------|--------|
| 背景 | 0.2x | 远离，缓慢 |
| 中景 | 0.5x | 中等深度 |
| 前景 | 1.0x | 正常滚动 |
| 内容 | 1.0x | 可读 |
| 浮动元素 | 1.2x | 向前弹出 |

### 创建深度
```javascript
// GSAP 视差层
gsap.to('.background', {
  scrollTrigger: {
    scrub: true
  },
  y: '-20%', // 移动较慢
});

gsap.to('.foreground', {
  scrollTrigger: {
    scrub: true
  },
  y: '-50%', // 移动较快
});

故事节奏

第1部分: 钩子 (全视口，醒目视觉)
    ↓ 滚动
第2部分: 背景 (文本 + 支持视觉)
    ↓ 滚动
第3部分: 旅程 (视差叙事)
    ↓ 滚动
第4部分: 高潮 (戏剧性显示)
    ↓ 滚动
第5部分: 结论 (行动号召或总结)

文本显示

滚动时淡入
触发时的打字机效果
逐字高亮
粘性文本与变化视觉

粘性部分

滚动时固定元素

使用时机: 当内容应在滚动期间保持可见时

## 粘性部分

### CSS 粘性
```css
.sticky-container {
  height: 300vh; /* 用于滚动的空间 */
}

.sticky-element {
  position: sticky;
  top: 0;
  height: 100vh;
}

GSAP 固定

gsap.to('.content', {
  scrollTrigger: {
    trigger: '.section',
    pin: true, // 固定该部分
    start: 'top top',
    end: '+=1000', // 固定1000px滚动
    scrub: true,
  },
  // 固定时动画
  x: '-100vw',
});

水平滚动部分

const sections = gsap.utils.toArray('.panel');

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: 'none',
  scrollTrigger: {
    trigger: '.horizontal-container',
    pin: true,
    scrub: 1,
    end: () => '+=' + document.querySelector('.horizontal-container').offsetWidth,
  },
});

用例

产品功能讲解
前后对比
分步流程
图片库

反模式

❌ 滚动劫持

为何不好: 用户讨厌失去滚动控制。可访问性噩梦。破坏后退按钮预期。在移动端令人沮丧。

替代: 增强滚动，不要替换。保持自然滚动速度。使用擦洗动画。允许用户正常滚动。

❌ 动画过载

为何不好: 分心，而非愉悦。性能下降。内容变得次要。用户疲劳。

替代: 少即是多。动画关键时刻。静态内容没问题。引导注意力，不要压倒。

❌ 仅桌面体验

为何不好: 移动端是主要流量来源。触摸滚动不同。手机性能问题。无法使用体验。

替代: 移动优先的滚动设计。移动端简化效果。在实际设备上测试。优雅降级。

⚠️ 尖锐边缘

问题	严重性	解决方案
滚动时动画卡顿	高	## 修复滚动卡顿
视差在移动设备上破坏	高	## 移动安全视差
滚动体验无法访问	中等	## 可访问滚动体验
关键内容隐藏在动画下	中等	## 内容优先的滚动设计

滚动体验Skill scroll-experience