本仓库主要是对 AirPods (3rd generation) 的滚动特效进行模仿
上述苹果官方页面之所以会随着鼠标滚动呈现很沉浸式的交互效果，背后是苹果把一个视频截取成了 100 ~ 200 张不等的图片
然后监听鼠标滚动事件 onscroll，根据 部分滚动距离 / 可滚动总距离 计算出一个滚动进度百分比 k
然后计算 k * 图片总张数 得到应该渲染哪一帧的图片，然后在页面的 canvas 中渲染这一张图片
- 当我们滚轮向下滚动时，
k一直在增加，所以图片一直在往前进，比如说从第002.jpg一直往前更换渲染到112.jpg - 当我们滚动向上滚动时（也就是往回走），
k一直在减小，所以图片一直往后退，比如说从第201.jpg一直往前更换渲染到56.jpg
这样一来，就能实现 画面进度跟随滚轮控制 的效果
这个交互效果确实非常妙，如果要落地，有以下几个要点:
- 设计要做出合适的视频，然后将视频切成几百帧的图片，工作量大，成本高
- 前端要关心的是: 在什么时机将这些图片异步加载进来，然后在滚动事件监听器中计算滚动百分比，得到图片的渲染帧号序列，用 canvas 的
drawImage()方法画图 - 还有就是前端和设计需要合力保证切出来的几百张图片的大小合适，估计每张是不能超过 30 kB 的，否则太多的话，客户端没法短时间下载完成，效果就出不来了