视差滚动-3D

屏幕录制 2019-06-08 14.15.13

网址链接:https://ripple.com/xrp

偶然间翻出一个之前收藏的网站,被开始的这个landing效果惊到了。我为什么会收藏这个网站?!我对他的业务似乎是没有丝毫兴趣,那我必定是被这炫酷(炫酷?)的视觉效果吸引了。

和通常看到的视差滚动(滑动相同距离相同,但不同的元素移动不同的距离)效果不同。当你用鼠标滚动时,它给人一种从桌面上到移动到桌面下的视觉效果。对我来说,应该是讲是第一次看到这种效果的视差滚动。

刚开始我猜测应该是在canvas中实现的,怀着我的猜想,我自信的按下了option+command+I!当打开console的一瞬间我惊了,不是canvas,完全没有,竟然是用div叠加而成的!

image-20190608142517838

怀着好奇之心,我决定扒一扒背后的原理。

扒原理

总共6个不同的部分,分别为一个div,总的可以分为两个部分

  1. 地面上的网 -> 桌面(只有一个桌面,也就只有一个div)
  2. 地面上的物体 -> 桌面上摆放的东西(5个div)

随着鼠标的滑动

情况1.可以观察到css属性scaleY(val)中的val值在不断的变化,从正到负。

可以理解为随着滑动,将桌面对应的div进行Y方向的形变,正 -> 0 -> 负数,最终表现出的效果就是从桌面上移动到桌面下观察的效果。

情况2.可以观察到css属性translate3d(x,y,z)中的y值在不断的改变。但是每一个div的变化量是不一样的,越靠近屏幕的div变化量越大,越远则越小。可以参考prespective这个概念,这样在滑动的时候就表现出视差的效果。

总结:

桌面进行伸缩变换,桌面上的物体进行平移变换。两个效果叠加出3D效果的视差滚动

变换示意图

怎么做

在知道了基本原理之后,发现其实并不难。想要做出这样的效果需要满足几个条件:

  1. 设计师需要事先设计出具有类似3D效果的图形

  2. 导出的资源(这里指png图片)需要合理的分块,准切的来将是在Z轴上不同深度的图形需要分别导出

  3. 在滚动过程中,不同的深度的分块在平移速度上需要满足一定的关系(最基本需要满足近快-远慢),具体的可能需要一定的3d数学计算
  4. 同样”桌面”在进行伸缩变换的时候,其变换量也与滚动距离有一定的关系

其中每一步都影响着最终呈现出的效果。

总结

这篇文章只是一个初步的原理分析,并没有提到如何去在代码中确定分块的伸缩量以及平移速度等等。这些需要进一步的去研究思考。暂时还没有去推导不同分块之间的速度关系。
其实最最重要的是想法,仔细看来这原理也不难,主要只用到了两个css transform属性。但是让人觉得很巧妙,而且效果很好。很佩服设计出这种效果的设计师和实现这种效果的前端工程师。