这是一款用全新 CSS Scroll-Driven Animations 实现的粘性图片区块切换特效：页面有四个全屏 section，每段左侧是标题+说明文字、右侧是一张固定居中的大图；随着页面向下滚动，section 之间会像卡片叠层一样一层压一层过渡，右侧的图片则用 `clip-path` 从底部向上被「擦除」交给下一段，衔接极其平滑。整段效果核心只有 `animation-timeline: view()` 加一个 clip-path 关键帧，不写一行 JavaScript，也不需要任何观察者。四段配色是奶油白、藕粉、姜黄、雾蓝，柔和高级感。
这款滚动切换的四个亮点
Scroll-Driven 动画核心：`section { view-timeline: --section; }`、`section img { animation: wipe linear both; animation-timeline: --section; animation-range: exit ... }`——CSS 直接把滚动进度绑到动画进度，不再依赖 IntersectionObserver。
四个 section 按 z-index 从 4 到 1 递减，`position: fixed` 的图片容器保持在视口内，视觉上就是「后来的 section 从下面爬上来覆盖前面」，卡片叠层感自然。
`animation-range: exit var(--gap) exit calc(100% - var(--gap))` 用变量控制动画区间，让图片 wipe 只发生在 section 即将离开视口时；避免动画过早或过晚触发。
整段无脚本，无监听，无观察者，也无 requestAnimationFrame——纯 CSS 帧率始终跟浏览器合成一致，滚动越丝滑越明显。
Scroll-Driven Animations 的三个技术要点
其一，`view-timeline` 必须挂在滚动主体的 section 本身，动画元素通过 `animation-timeline: --section` 引用；同一个 timeline 可被多个动画共享。其二，`animation-range` 支持 `entry`（进入）/`contain`（完全在视口）/`exit`（离开）三个关键字加百分比或长度，可以精确控制在滚动的哪一段跑动画——本模板用 exit 让 wipe 在离开时发生。其三，图片是 `position: fixed` 而不是 sticky，因为四段共用同一位置的图片容器，只是内容图片不同；如果换成每段独立 sticky 容器则会有明显的重复图片区域。源码中均有注释可参考。
换成自己的图片或增删段落
四段的图片和文字直接写在 4 个 `
浏览器兼容性：Scroll-Driven Animations 需 Chrome 115+、Edge 115+；Safari 从 18 开始支持，Firefox 尚未启用，会显示为图片始终可见的降级状态，功能不破坏。详细运行方法请参见压缩包内的帮助文档。
常见问题
Firefox 上看不到动画怎么办
Firefox 目前对 Scroll-Driven Animations 支持有限，会显示为图片不做 wipe、直接常显；文字与布局照旧。如果要 fallback 动画，可写一份 IntersectionObserver 的 JS 版本。
能改成横向滚动切换吗
能。把 `section` 设置为横向 flex 并让 body 支持横向滚动，`view-timeline` 用 `axis: inline` 指定横向即可；关键帧 clip-path 方向同步改。
四段内容能不能是不同的图片布局（左图右图交替）
能。改 section 内的 flex 顺序或 grid 布局即可；每段的 clip-path 目标元素改成对应 section 内即可。
怎么让文字也随滚动淡入淡出
给 `.content` 也加一份 `animation-timeline: --section` 的动画，`@keyframes fade` 定义 opacity 0→1→0 或 translateY 与 opacity 联动。
适合放在哪些页面
适合品牌故事页、产品特性介绍长页、服务介绍 Landing Page、活动/项目案例讲述、任何「一段文案配一张大图 + 顺序展开」的滚动叙事场景。下载源码后可作为独立段落嵌入任何 HTML 页面。
