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

我想做一个网站，使用的背景，移动的基础上的位置，光标在网站上
我找到了这个网站，它可以直观地展示我想做的事情<我只需要知道如何使字母移动。稍后我将用图像替换它们。

您可能希望尝试使用parallax.js来实现所需的效果

演示

快点

var scene=document.getElementById（'scene'）；
var parallaxInstance=新视差（场景）；
视差.摩擦力（0.2,0.2）
*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
背景色：#F9F871；
宽度：100vw；
高度：100vh；
}
.现场{
最高：30%；
}
.层{
宽度：100%；
高度：200px；
}
.项目{
宽度：50px；
高度：50px；
边界半径：200px；
背景色：红色；
位置：相对位置；
}
.项目-1{
背景色：#FF9671；
左：30%；
}
.项目-2{
背景色：#D65DB1；
左：60%；
}
.项目-3{
背景色：#FF6F91；
左：40%；
}
.项目-4{
背景色：#FFC75F；
左：70%；
}
您可以使用
css属性来实现这一点

基于Lea Verou的谈话


const root=document.documentElement；
document.addEventListener（“mousemove”，evt=>{
设x=evt.clientX/innerWidth；
设y=evt.clientY/innerHeight；
root.style.setProperty（“--mouse-x”，x）；
root.style.setProperty（“--mouse-y”，y）；
});
html{
身高：100%
}
：根{
--小鼠x:5；
--小鼠y:5；
}
身体{
身高：100%；
背景图像：径向梯度（在calc（var（-mouse-x）*100%）calc（var（-mouse-y）*100%），透明，黑色）；
}
该网站看起来有3d效果。如果使用three.js或某个3d库，则可以获得3d效果。这是最难的部分。有一些功能，你需要传递一个鼠标相对于屏幕中心的位置是相对容易的。你是说你还没有这两样东西？在完成3d部分之前，我不会担心鼠标部分。OK，谢谢你的帮助：-）另外，如果你不需要让结果看起来如此3d，那么使用css3和rotate（）可能会有一些运气。但是它基本上是2D的，就像在看它的时候把一张纸向上/向下/向左/向右倾斜哇！这太神奇了。非常感谢你给我看这个。这将使我的网站和未来的网站更容易使！！