带提示、钥匙孔揭示与轨迹标记的滚动同步图片幻灯片
由 GSAP 与 ScrollTrigger 驱动的滚动式图像序列。图像会根据预设的提示区间淡入，且任一时刻仅有一张图像可见。
基于提示（cue）的覆盖文本通过 data-start 与 data-end 属性与当前图像同步。一次只显示一条提示，并依据滚动方向与时序进行切换。
钥匙孔揭示效果
在滚动过程中，多边形 clip-path 会扩展，通过中央的“钥匙孔”形状揭示幻灯片。四个角落元素同步向外动画。该效果由滚动驱动、可逆，并与幻灯片容器绑定。
图像预加载策略
- 首先根据滚动位置确定初始图像，并优先预加载该图像。
- 随后按交替顺序预加载相邻图像（
+1, -1, +2…）。 - 第一批完成后，再按顺序预加载剩余图像。
- 仅在确认加载完成后才淡入显示图像，不使用
decode()。
预加载器生命周期
- 在第一张图像显示前，覆盖层（预加载器）保持可见。
- 通过受保护的
nextTick机制在淡入后移除预加载器。 - 预加载器激活期间跳过淡入动画。
滚动轨道与提示标记
- 在轨道旁显示垂直时间刻度（例如
0s, 1s, 2s…）。 - 用带标签的标记可视化每条提示的起止点。
- 标记会依据时间线时长动态更新。
向下滚动
↓
