视差滚动-3D
偶然间翻出一个之前收藏的网站，被开始的这个landing效果惊到了。我为什么会收藏这个网站？！我对他的业务似乎是没有丝毫兴趣，那我必定是被这炫酷（炫酷？）的视觉效果吸引了。
和通常看到的视差滚动（滑动相同距离相同，但不同的元素移动不同的距离）效果不同。当你用鼠标滚动时，它给人一种从桌面上到移动到桌面下的视觉效果。对我来说，应该是讲是第一次看到这种效果的视差滚动。
刚开始我猜测应该是在canvas中实现的，怀着我的猜想，我自信的按下了option+command+I！当打开console的一瞬间我惊了，不是canvas,完全没有，竟然是用div叠加而成的！
怀着好奇之心，我决定扒一扒背后的原理。
扒原理
总共6个不同的部分，分别为一个div，总的可以分为两个部分
- 地面上的网 -> 桌面（只有一个桌面，也就只有一个div）
- 地面上的物体 -> 桌面上摆放的东西（5个div）
随着鼠标的滑动
情况1.可以观察到css属性scaleY(val)中的val值在不断的变化，从正到负。
可以理解为随着滑动，将桌面对应的div进行Y方向的形变，正 -> 0 -> 负数，最终表现出的效果就是从桌面上移动到桌面下观察的效果。
情况2.可以观察到css属性translate3d(x,y,z)中的y值在不断的改变。但是每一个div的变化量是不一样的，越靠近屏幕的div变化量越大，越远则越小。可以参考prespective这个概念，这样在滑动的时候就表现出视差的效果。
总结：
桌面进行伸缩变换，桌面上的物体进行平移变换。两个效果叠加出3D效果的视差滚动。
怎么做
在知道了基本原理之后，发现其实并不难。想要做出这样的效果需要满足几个条件：
设计师需要事先设计出具有类似3D效果的图形
导出的资源（这里指png图片）需要合理的分块，准切的来将是在Z轴上不同深度的图形需要分别导出
- 在滚动过程中，不同的深度的分块在平移速度上需要满足一定的关系（最基本需要满足近快-远慢），具体的可能需要一定的3d数学计算
- 同样”桌面”在进行伸缩变换的时候，其变换量也与滚动距离有一定的关系
其中每一步都影响着最终呈现出的效果。
总结
这篇文章只是一个初步的原理分析，并没有提到如何去在代码中确定分块的伸缩量以及平移速度等等。这些需要进一步的去研究思考。暂时还没有去推导不同分块之间的速度关系。
其实最最重要的是想法，仔细看来这原理也不难，主要只用到了两个css transform属性。但是让人觉得很巧妙，而且效果很好。很佩服设计出这种效果的设计师和实现这种效果的前端工程师。