Javascript 使用背景鼠标移动脚本平滑移动

我发现了如何使背景图像随着鼠标移动而移动。 我正试图弄清楚如何使运动平稳或更流畅。 我最清楚的是，通过除以越来越大的数字，背景运动会越来越少，但这就是我所知道的

html

jquery

$(document).ready(function(){
  $('#body').css('background-position', 'calc(45% - 0px)');
   $('#body').mousemove(function(e){
     var x = -(e.pageX + this.offsetLeft) / 205;
     var y = -(e.pageY + this.offsetTop) / 100;
     $(this).css('background-position', "calc( 45% - " + x + 'px' + ")" + y + 'px');
   });    
 });

一个很好的例子是

---

或者这个家伙的网站：

你应该把背景分离成它自己的元素

使用以下样式设置元素的样式：

.background
{
    will-change: transform;
}

启动渲染引擎，将其升级到自己的合成层。这使得

transform

更改更便宜

通过

translateX（…）translateY（…）

而不是背景位置来设置

变换的动画

为了使移动平稳，您可以跟踪最近几次位置变化并将其平均


具有10个样本平滑的示例：


const root=document.querySelector（“.root”）；
const bg=document.querySelector（“.background”）；
常量位置=[]；
root.addEventListener（“mousemove”，e=>{
常数x=-（e.pageX+bg.offsetLeft）/50；
常数y=-（e.pageY+bg.offsetTop）/50；
位置。推动（{x，y}）；
常数平均计数=10；
如果（positions.length>averageCount）
位置。拼接（0，1）；
const current=positions.reduce（（acc，e）=>{acc.x+=e.x；acc.y+=e.y；返回acc}，{x:0，y:0}）；
当前.x/=位置.length；
当前.y/=位置.length；
bg.style.transform=`translateX（${current.x}px）translateY（${current.y}px）`；
});
.root
{
位置：相对位置；
}
.背景
{
改变：转变；
宽度：100%；
身高：100%；
}
.覆盖
{
位置：绝对位置；
左：50%；
最高：50%；
转化：translateX（-50%）translateY（-50%）；
}

乱数假文
不要设置背景位置的动画，它会显示背景位置。使用转换。也不要做类似的事情。就性能而言，这是一场噩梦。我认为您需要在“
”
后面加一个空格。要有这个：
$（this.css（'background-position'，“calc（45%-“+x+'px'+”）”）+y+'px'）我让它在我的项目中工作，有没有办法防止它产生空白？@BrianPatrick:你是说在背景之外？如果是这样的话，您可以将背景图像放大到一定程度，这样就不会产生任何间隙。精确值取决于可能的移动量。
$(document).ready(function(){
  $('#body').css('background-position', 'calc(45% - 0px)');
   $('#body').mousemove(function(e){
     var x = -(e.pageX + this.offsetLeft) / 205;
     var y = -(e.pageY + this.offsetTop) / 100;
     $(this).css('background-position', "calc( 45% - " + x + 'px' + ")" + y + 'px');
   });    
 });

.background
{
    will-change: transform;
}