javascript - 如何使背景根据光标上的位置更改其位置

Question

我想制作一个网站，该网站使用根据光标在网站上的位置移动的背景。
我发现这个网站可以直观地表示我想做的事情。http://www.alexandrerochet.com/
我只需要知道如何让字母移动。稍后我将用图像替换它们。

标签： javascripthtmlcss

Answer 1

您可以使用css properties.

基于 Lea Verou 的演讲

const root = document.documentElement;

document.addEventListener("mousemove", evt => {
  let x = evt.clientX / innerWidth;
  let y = evt.clientY / innerHeight;

  root.style.setProperty("--mouse-x", x);
  root.style.setProperty("--mouse-y", y);
});

html {
  height: 100%
}

:root {
  --mouse-x: .5;
  --mouse-y: .5;
}

body {
  height: 100%;
  background-image: radial-gradient( at calc(var(--mouse-x) * 100%) calc(var(--mouse-y) * 100%), transparent, black);
}