使用鼠标位置移动背景

假设您想在鼠标悬停在元素上时移动元素的 background-position，为设计增添一些趣味。您有一个这样的元素

<div class="module" id="module"></div>

您可以在上面添加一个背景

.module {
  background-image: url(big-image.jpg);
}

您可以使用以下 JavaScript 代码调整 background-position

const el = document.querySelector("#module");

el.addEventListener("mousemove", (e) => {
  el.style.backgroundPositionX = -e.offsetX + "px";
  el.style.backgroundPositionY = -e.offsetY + "px";
});

查看 CodePen 上 Chris Coyier 的 使用鼠标移动背景 示例 (@chriscoyier)。

或者，您可以在 JavaScript 中更新 CSS 自定义属性

const el = document.querySelector("#module");

el.addEventListener("mousemove", (e) => {
  el.style.setProperty('--x', -e.offsetX + "px");
  el.style.setProperty('--y', -e.offsetY + "px");
});

.module {
  --x: 0px;
  --y: 0px;
  background-image: url(large-image.jpg);
  background-position: var(--x) var(--y);
}

查看 CodePen 上 Chris Coyier 的 使用鼠标移动背景 示例 (@chriscoyier)。

以下示例直接在 JavaScript 中移动背景，但应用了过渡效果，因此它会滑动到新位置，而不是在您第一次进入时跳动

查看 CodePen 上 Chris Coyier 的 可移动背景广告 示例 (@chriscoyier)。

或者，您可以移动一个实际的元素（而不是 background-position）。如果您要在滑动元素上添加一些内容或交互性，可以这样做。以下示例也是设置 CSS 自定义属性，但通过 CSS translate() 和 calc() 实际上移动了元素，从而调节了速度。

查看 CodePen 上 Chris Coyier 的 Hotjar 移动热图广告 示例 (@chriscoyier)。

我相信还有很多其他方法可以实现这一点——移动 SVG 视窗、控制画布的脚本、WebGL……谁知道呢！如果您有一些更巧妙的方法来处理这个问题，请在评论中分享链接。