3D 视差效果

DobbyKim 发布于2019-08-21 11:20 / 2652人阅读

摘要：前一周敢玩新版端上线，其中原创视频封面用的就是上图的效果，下面详细说一下怎么实现起因这个效果有着相对较好的用户体验，在的基础上又有了与用户交互的体验，仿佛用户一直在不同角度按压这张图片。

前一周敢玩新版PC端上线，其中原创视频封面用的就是上图的效果，下面详细说一下怎么实现

起因

这个效果有着相对较好的用户体验，在 hover 的基础上又有了与用户交互的体验，仿佛用户一直在不同角度按压这张图片。

当然这个效果早就有人在写并用于官网了，感兴趣可以去锤子官网，看下轮播图的鼠标交互效果。

基本思路

单借助 CSS3 的 hover 不足以支配这个效果，JS 方案考虑以下步骤

绑定鼠标事件（mouseover），绑定离开事件（mouseleave）

判断鼠标相对于图片的位置

计算出应该翻转（rotate）的角度，同时改变阴影的方向

将图片复位

这里涉及 CSS3 的一个比较少用的属性 perspective

MDN: perspective 属性指定了观察者与 z = 0 平面的距离，使具有三维位置变换的元素产生透视效果。z > 0 的三维元素比正常大，而 z < 0 时则比正常小，大小程度由该属性的值决定。

深入了解去看这个文章CSS3 Transform 的 perspective 属性，时间比较久但是很经典，除了兼容性描述有变其它描述很准确。

开始构建

html：

css:

.avatar {
  width: 300px;
  height: 300px;
  margin: 50px auto;

  background: url("http://7xr2s7.com1.z0.glb.clouddn.com/avatar.jpg");
  background-size: contain;

  transition: all .3s linear;
  transform-origin: 50%;
}

js:

let el = document.querySelector(".avatar")

el.addEventListener("mousemove", (e) => {
  let thisPX = el.getBoundingClientRect().left
  let thisPY = el.getBoundingClientRect().top
  let boxWidth = el.getBoundingClientRect().width
  let boxHeight = el.getBoundingClientRect().height

  let mouseX = e.pageX - thisPX
  let mouseY = e.pageY - thisPY
  let X
  let Y

  X = mouseX - boxWidth / 2
  Y = boxHeight / 2 - mouseY

  el.style.transform = `perspective(300px) rotateY(${X / 10}deg) rotateX(${Y / 10}deg)`
  el.style.boxShadow = `${-X / 20}px ${Y / 20}px 50px rgba(0, 0, 0, 0.3)`
})


el.addEventListener("mouseleave", () => {
  el.style.transform = `perspective(300px) rotateY(0deg) rotateX(0deg)`
  el.style.boxShadow = ""
})

以上代码看似没什么问题，也许你在新版本浏览器（无需babel）已经顺利执行了，但是这里有一个坑。

除非你能确定你的图片在一屏内，就是说你的 body 最大高度就是窗口高度，不然 let mouseY = e.pageY - thisPY 这句计算出来的不一定是真实的鼠标偏移量，而是加上滚动调偏移后的值。

解决办法就是

let scrollTop = document.documentElement.scrollTop + document.body.scrollTop  //计算滚动高度

let mouseY = e.pageY - scrollTop - thisPY  //减去滚动高度

一般的项目考虑到这就可以了，如果你的项目存在 X 轴上的偏移计算原理相同，减去偏移量。

实例

我自己的代码放在了 codepen，如下

https://codepen.io/orangexc/p...

另外最近发现在 codepen 上的一个项目，在热门榜单上，基本思路是一样的只不过换了种方式去写，很不错的例子，对于需要多个元素循环绑定的情况很好用。

https://codepen.io/PavelDoGre...

注：此种方法规避了高度差计算的问题，因为是基于 offsetX（作用元素的偏移量），推荐使用

总结

JS 动画考虑的会相对多一些，可以获取宽高及鼠标位置（方法多样），根据鼠标位置可以计算出动画的对应效果，选择合适的且兼容性好的代码很关键

文章出自 orange 的 个人博客 http://orangexc.xyz/

服务器托管 idc机房托管视差效果视差滚动效果 js 视差效果 js如何实现3d效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86573.html

滚动视差？CSS 不在话下

摘要：可以感受下种不同取值的不同效果使用实现滚动视差首先，我们使用来实现滚动视差。何为滚动视差视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗...

RobinTang 2019-04-23 13:29 评论0 收藏0
[转]滚动视差？CSS 不在话下/background attachment

摘要：通常而言，滚动视差在前端需要辅助才能实现。当然，其实在实现滚动视差效果方面，也有着不俗的能力。此关键字表示背景相对于视口固定。使用实现滚动视差言归正传，下面介绍另外一种使用实现的滚动视差效果，利用的是。何为滚动视差视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应...

darry 2019-04-23 13:25 评论0 收藏0
CSS3 3D transform变换视差滚动效果学习

摘要：变换视差滚动效果学习在学习如何做到视差滚动效果时，阅读了张鑫旭老师的文章，记录下学习视差滚动变换的几个理解点。视差滚动中的计算，画一个草图即可得知，是舞台视觉平面抬起向你而来的距离，而是元素后退的距离离你而去，所以 CSS3 3D transform变换视差滚动效果学习在学习css如何做到视差滚动效果时，阅读了张鑫旭老师的文章，记录下学习视差滚动 and 3D transform变...

el09xccxy 2019-08-30 15:53 评论0 收藏0