在像素世界里搭一条可逆的路

为什么要让滚动可逆

传统入场动画只关心元素是否进入视口。一旦用户向上滚动，动画状态就很容易与页面位置失去联系。这个网站选择把全局滚动位置压缩为 0 到 1 的进度，所有场景都只读取它。

滚动不是播放按钮，而是一根可以来回拨动的时间轴。

一个小而稳定的映射函数

const local = clamp((progress - start) / (end - start), 0, 1);

每个场景只知道自己的开始和结束区间。陆地、深海与星空因此能够独立开发，也能按照同一方向自然倒放。

继续迭代

下一步会把几何占位图形替换为原创纹理图集，同时保留这一套进度协议。