视差效果的实际应用
在实际开发中，应用一些微交互、视差效果，可以让页面更加生动。如下面的
例子：
这个例子中运行了3D transform 的相关知识。具体细节如下分析。
1、切图
将psd稿上的这个区域切成如下图的3块图片，方便在页面上进行叠加、
2、布局
给三张图片设置不一样的translateZ（translateZ的值越小，元素大小越小，因为元素远去，我们眼睛看到的就会变小），这样三层图片就形成了远近的层次效果，否则都在一个平面上，就没有了视差效果，如下：
（缺少了层次效果，就没有了视差效果）
html布局代码：
<div class="banner-row move-row" style="transform-style: preserve-3d;"> <div class="layer right-image" style="transform: translateZ(50px);"> <img src="images/index/br4_img1.png" /> </div> <div class="layer right-image" style="transform: translateZ(100px);"> <img src="images/index/br4_img2.png" /> </div> <div class="layer right-image" style="transform: translateZ(150px);"> <img src="images/index/br4_img3.png" /> </div> </div>
3、JS
用JS实现跟鼠标的互动效果，图片向着鼠标移动的相反方向转动。可以想象一下，Z轴上从远到近，有三张背景透明的图（从屏幕正方看，三张图重叠，看上去就是一张图）然后，让他们在 X轴 或者 Y轴转动，就形成了视差效果。
主要js如下：
var w = $(window).width(), h = $(window).height(); function move(t) { var moveX = (t.pageX / w - .5) * (-25) || 10, moveY = -(t.pageY / h - .5) * (-20) || 10; var n = "rotateX(" + moveY + "deg) rotateY(" + moveX + "deg) "; return n; } $(".left-header").on("mousemove", function(e) { var n = move(e); $(".move-row").css("transform", n); }); $(".move-row").on("mousemove", function(e) { var n = move(e); $(this).css("transform", n); });
参考:
https://codepen.io/agelber/pen/wAgzI
