视差效果的实际应用

2022-11-27 94

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 用JS实现跟鼠标的互动效果，图片向着鼠标移动的相反方向转动。可以想象一下，Z轴上从远到近，有三张背景透明的图（从屏幕正方看，三张图重叠，看上去就是一张图）然后，让他们在 X轴或者 Y轴转动，就形成了视差效果。

视差效果的实际应用

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

例子：

这个例子中运行了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轴转动，就形成了视差效果。

20181113134953675 (1).png

主要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);
 });