今天访问了kepler.gl这个网站，看到它的轮播挺有意思，就研究了一下。轮播已经是个old school的话题，做移动端页面或者做官网的同学，应该是熟得不能再熟的技能，但是我这两个都没做过，所以有点好奇。
首先，页面上这个轮播，有个初始化过程。轮播的图都是叠合状态，当页面滚动到它的区域时，聚焦到中间顺序的图，左右的图稍微露出一部分，且会有一个从视觉上向后方运动的过程。
这个动画里，视觉上的远近效果，主要是用了CSS Transform 3D 的perspective(透视)函数，具体用法参考MDN;除了perspective，Transform里还用了translate3d，比如聚焦的图，Z会比较高，而作为背景的图，Z依次递减。
组件的初始化，其实和图片懒加载使用了相同的技术，就是监测Element是否进入Viewport，当Element进入后，做相应的处理，改变样式或者加载图片。这个交互的监测，有挺多LazyLoading/ScrollLoading的插件，原理是页面目前的位置和元素的位置进行比较；或者使用ntersection Observer API。kepler.gl是基于React的，可能用了React-Reveal，后者是两种方法都兼容。
前面的方法，可以有两种实现方式。一是获取页面绝对的滚动值和元素相对于page的绝对位置，通过遍历元素parent，累加offetTop；另外一种是获取element.getBoundingClientRect()里的top值，如果大于0且小于window.innerHeight，则是在viewport里全部或者部分显示。