滚动遮盖转场

概述

一种根据用户滚动（鼠标滚轮、触摸滑动）实时控制动画进度的 滚动驱动动画（Scroll-driven Animation）。

其核心特征是：

• 滚动距离决定动画进度；
• 当前场景在动画期间通过 position: sticky 固定在视口中；
• 通过 clip-path 裁剪、mask-image 遮罩或 transform 位移揭示下一屏内容；
• 实现类似电影镜头切换的沉浸式浏览体验。

技术原理

用户滚动 → 监听滚动事件 → 计算滚动进度（0-1）
    → 固定当前场景（sticky/pin）
    → 驱动遮罩动画（clip-path / mask / transform）
    → 逐渐显示下一场景

核心技术栈

GSAP + ScrollTrigger（推荐方案）

gsap.to(".reveal-element", {
  clipPath: "inset(0% 0% 0% 0%)",    // 从完全裁剪到完全显示
  scrollTrigger: {
    trigger: ".section",
    start: "top top",
    end: "bottom top",
    scrub: true,                       // 动画进度跟随滚动
    pin: true,                         // 固定当前场景
  },
})

核心 API：

• scrub: true — 动画时间轴与滚动位置绑定
• pin: true — 动画期间固定场景不离开视口

三种揭示方式

方式适用效果示例clip-path上下/左右/圆形揭示clip-path: inset(0 0 100% 0) → inset(0)mask-image波浪/粒子/不规则揭示mask-image: url(mask.svg) + 位移动画transform幕布滑动/场景推进translateY(100%) → translateY(0)

典型实现

clip-path 上下揭示

.reveal-section {
  position: sticky;
  top: 0;
  clip-path: inset(0 0 100% 0);       /* 初始：完全裁剪底部 */
  transition: clip-path 0.1s linear;    /* 由 ScrollTrigger 驱动 */
}

.reveal-section.active {
  clip-path: inset(0 0 0% 0);          /* 完全显示 */
}

CSS 原生滚动驱动

@keyframes reveal {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}

.reveal-section {
  animation: reveal linear;
  animation-timeline: view();           /* 原生 Scroll Timeline */
  animation-range: entry 0% entry 100%;
}

适用场景

• 品牌官网产品故事（Apple、Tesla 风格）
• 游戏宣传页（WeGame、Steam 专题）
• 设计师作品集 / 创意工作室官网
• 任何需要”滚动叙事”的沉浸式页面

行业名称速查

• Scrollytelling（滚动叙事）
• Scroll-driven Animation（滚动驱动动画）
• Reveal Transition / Mask Reveal Animation

‍