如何使用 HTML CSS 和 JavaScript 创建 mousemove 视差效果？

如果您曾经浏览过一些网站，也许会注意到鼠标移动时背景图片会有一种很酷的视差效果。这种效果可以通过 HTML、CSS 和 JavaScript 实现。

HTML

首先，我们需要在 HTML 中添加需要产生视差效果的元素。我们可以使用 <div> 元素来包含图片，同时给它设置一个 ID。

<div id="parallax-container">
  <img id="parallax-image" src="example.jpg" alt="example">
</div>

CSS

接下来，我们需要使用 CSS 对这个元素进行样式设置。我们需要将 <div> 元素的 position 属性设置为 relative，并且将图片元素的 position 属性设置为 absolute。这样，图片元素就可以根据父元素的位置进行位置偏移，从而实现视差效果。 我们还可以使用 transform: translateZ() 属性来使背景图片产生 3D 效果。

#parallax-container {
  position: relative;
}
#parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  transform: translateZ(-1px);
}

JavaScript

最后，我们需要编写 JavaScript 代码来获取鼠标位置，并将其应用于图片元素的位置偏移中。我们可以使用 mousemove 事件来监听鼠标位置，并计算出需要偏移的距离。 使用 transform: translate() 属性来应用偏移值。

const parallaxImage = document.getElementById("parallax-image");

document.addEventListener("mousemove", function (e) {
  const x = e.clientX / window.innerWidth;
  const y = e.clientY / window.innerHeight;
  parallaxImage.style.transform = "translate(-" + x * 50 + "px, -" + y * 50 + "px)";
});

上述代码中，我们将鼠标位置除以窗口的宽度和高度，以获得 0 到 1 之间的百分比值。然后，我们将这些百分比值与一个偏移量相乘，这样就可以得到需要应用的偏移值。translate() 属性接受两个参数，x 和 y 的偏移距离。

完整代码

HTML:

<div id="parallax-container">
  <img id="parallax-image" src="example.jpg" alt="example">
</div>

CSS:

#parallax-container {
  position: relative;
}
#parallax-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  transform: translateZ(-1px);
}

JavaScript:

const parallaxImage = document.getElementById("parallax-image");

document.addEventListener("mousemove", function (e) {
  const x = e.clientX / window.innerWidth;
  const y = e.clientY / window.innerHeight;
  parallaxImage.style.transform = "translate(-" + x * 50 + "px, -" + y * 50 + "px)";
});

我们还可以根据自己的需求进行修改和扩展。