javascript鼠标移动视差滚动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文分享如何使用JavaScript 制作鼠标移动视差滚动效果

主要js

<script type="text/javascript"> 

  document.addEventListener("mousemove", parallax);
  function parallax(e){
    this.querySelectorAll('.layer').forEach(layer => {
      const speed = layer.getAttribute('data-speed')

      const x = (window.innerWidth - e.pageX*speed)/100
      const y = (window.innerHeight - e.pageY*speed)/100

      layer.style.transform = `translateX(${x}px) translateY(${y}px)`
    })
  }
   
</script>