滚动视差-3D

网址连接：ripple.com/xrp

偶然间翻出一个以前收藏的网站，被开始的这个landing效果惊到了。我为何会收藏这个网站？！我对他的业务彷佛是没有丝毫兴趣，那我一定是被这炫酷（炫酷？）的视觉效果吸引了。

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

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

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

扒原理

总共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属性。可是让人以为很巧妙，并且效果很好。很佩服设计出这种效果的设计师和实现这种效果的前端工程师。