文件

CSS 相关

CSS定位

js相关

一个plaxify.js库

images相关

github-404页面相关资源图片

示例效果

废话少说，先看效果如图所示:

重要代码

plaxify.js是整个页面的核心，它封装了移动功能，函数使用说明如下：

// HTMLDomElement 需要这个效果的dom元素
window.plaxify(HTMLDomElement, {
  xRange: Number, // x轴移动的最大范围
  yRange: Number, // y轴移动的最大范围
  invert: Boolean // 是否与鼠标移动方向相反
})

实现思路

根据鼠标在屏幕上的位置，当鼠标在左下角时，前景图片跟着鼠标移动，远景图片则向反方向移动（也就是右上角）。

!function(t) {}(window) // 匿名函数自调立即执行函数 t就是window

document.body.addEventListener("mousemove", a) // 监听鼠标移动

transform: translate3d(x, y, z); // 根据鼠标改变不同元素的x轴、y轴、z轴坐标。就会出现这种视觉差的效果。

transform: translate3d

3D坐标系

X轴：水平向右为正，水平向左为负
Y轴：垂直向下为正，垂直向上为负
Z轴：从界面向外为正，向里为负
总结：右下外为正，左上里为负

最后

如有兴趣可以参考源码自行扩展。

最后谢谢大家观看，如果觉得本文有帮助到你，望不吝啬点赞和收藏，动动小手点star,嘿嘿。