我不知道的前端知识-kepler.gl的近大远小轮播
今天访问了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里全部或者部分显示。