视差效果的实际应用

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

视差效果的实际应用



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

例子:


20181115185347457.gif


这个例子中运行了3D transform 的相关知识。具体细节如下分析。


1、切图


将psd稿上的这个区域切成如下图的3块图片,方便在页面上进行叠加、


20181115185449871.png


2、布局


给三张图片设置不一样的translateZ(translateZ的值越小,元素大小越小,因为元素远去,我们眼睛看到的就会变小),这样三层图片就形成了远近的层次效果,否则都在一个平面上,就没有了视差效果,如下:


20181115185740854.gif


(缺少了层次效果,就没有了视差效果)

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


参考:


https://codepen.io/agelber/pen/wAgzI


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


目录
打赏
0
0
0
0
1
分享
相关文章
SQL安装指南:一步步教你如何安装并配置SQL数据库
展望未来,随着技术的不断进步和应用场景的不断拓展,SQL数据库将继续发挥重要作用。同时,我们也需要不断学习和掌握新的数据库技术和工具,以适应不断变化的市场需求和技术挑战。希望本文能为你提供一个良好的起点,帮助你在SQL数据库的学习和实践之路上取得更大的进步。
【笔记】API参考—请求结构
本文主要介绍PolarDB-X 2.0支持的API请求结构,包括服务地址、请求协议和请求方法等。
101 0
高并发之——线程的执行顺序
调用Thread的start()方法启动线程时,线程的执行顺序是不确定的。也就是说,在同一个方法中,连续创建多个线程后,调用线程的start()方法的顺序并不能决定线程的执行顺序。
191 0
kde
|
7天前
|
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
4190 9
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
国内如何安装和使用 Claude Code镜像教程 - Windows 用户篇
698 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问