视差效果的实际应用

在实际开发中，应用一些微交互、视差效果，可以让页面更加生动。如下面的例子：

这个例子中运行了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

https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-7/#comment-389111