前端代码：多阶段滚动对比，前后效果对比

一滑即懂的「分阶段演变」展示页：滚动时画面按蛋形折叠的故事线依次展开，层层透视出海岸从原点到进化再到回环的细节。配色采用温润的沙砾棕与墨色对比，并辅以轻微渐层与阴影，让滚动时的分隔线、裁剪窗口与进度数字更具立体感。

• 功能亮点：基于 scroll-timeline/animation-range 的滚动驱动动画；sibling-index()/sibling-count() 自动计算层级 z-index、裁剪窗与分隔线同步，增删图层无需手动编号；CSS @property 计算并显示百分比，JS 负责平滑滚动、偏移测量与点击指示器跳转。
• 品牌呈现：顶部圆角徽章内置“KS主题”，底部落款保持简洁，适合演示或商用素材嵌入。
• 设计语言：16:11 宽幅视角（移动端自动改为 4:5），柔和沙色背景搭配深色文字，悬浮分割线与蒙版让对比区块更聚焦。
• 适用场景：产品迭代对比、创意分镜讲述、作品前后期展示、地产/景观/室内改造前后对比、视觉实验或教育演示。

使用方式

1. 直接双击或用本地服务器打开 index.html，所有图片与样式已本地化，无需外网资源。
2. 替换图片：将 assets/images/ 下的图替换为同名文件，或在 index.html 中更新 source/img 的路径即可。
3. 调整段数：复制或删除 .image-layer 块即可，时间轴、裁剪窗口与分隔线会自动重算；无需修改编号。
4. 品牌文案：修改 index.html 中的 .brand-badge 与页脚文字即可更换品牌或链接。

运行依赖

纯 HTML + CSS + 原生 JS，无需打包或框架；现代浏览器需支持 scroll-timeline、animation-range、@property 等新特性，建议使用最新版 Chrome/Edge。

自定义小贴士

• 样式参数集中在 :root 变量中，可调色彩、空间、动画时长与对比区域比例。
• 想要更柔的滚动感，可在 script.js 中微调 ease 与 friction。
• 若要增加手势或键盘跳转，可在 scrollToStage 基础上新增事件绑定。