视差动画原理分析【1】

2019独角兽企业重金招聘Python工程师标准>>>

        视差动画能够给普通的2d画面带来3d的纵深效果。

        原理分析：

        1、在一个容器div内，放置2个以上的等大div子容器作为背景层；

        2、让2个内容不同的背景层，同时以不同的速度朝相同方向移动（或者让他们在相同的时间和方向上产生不同的位移值）；

        上述操作后便会产生视差滚动的3d纵深效果。

        为什么呢？

        因为透视中的“近大远小”、“近快远慢”和“近处清晰远处模糊”的特性，它们中只要一个特性其实就能给我们带来一定的3d纵深感，几个同时作用效果更明显。视差动画主要利用了3d世界的“近快远慢”的特性

    “近大远小”和“近快远慢”会给我们带来3d纵深感，如现实世界中的远处的高楼我们用手指就能丈量，近处的一个小商铺却显得更高大；天上时速大几百公里的飞机感觉还没我们身边呼啸而过的汽车快。

        在构建视差动画时，我们让最上面z-index值最高最靠近用户视野的那层背景的内容细节相对粗大一些，让其位移速度也更快，而让其下的图层，内容细节细小些，位移速度也相对变慢。3d的纵深效果就产生了。

        最简单的视差动画是双背景的视差动画，如果背景层更多，会带来更深的纵深3d感

转载于:https://my.oschina.net/710409599/blog/311192