👍GSAP实现

// CDN引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
...
// 关键代码
window.addEventListener('mousemove', (e) => {
  let dt = document.querySelectorAll('.layer')
  for (let i = 0; i < dt.length; i++) {
    let rect = dt[i].getBoundingClientRect()
    let x = e.pageX - rect.width / 2
    let y = e.pageY - rect.height / 2
    gsap.to(dt[i], {
      x: x * i * 0.02,
      y: y * i * 0.02,
      ease: 'linear',
      duration: 0
    })
  }
})

parallax.js实现

起初想要 实现这种效果，用到的是 parallax.js。这是一个专门为大家实现视觉差的一个插件，使用方法也很简单。

parallax官网效果预览

parallax Github地址

// CDN 引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
// 或者npm安装
npm i -s parallax-js
...
<div id="scene">
  <div data-depth="0.2">My first Layer!</div>
  <div data-depth="0.6">My second Layer!</div>
</div>
...
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);