我发现了如何使背景图像随鼠标移动而移动。 我想弄清楚如何使运动平滑或使其更流畅。 我发现的最多的是，通过除以越来越大的数字，背景移动会越来越少，但这就是我所得到的。
html
<body id="body">
</body>
CSS
html {
width: 100%;
}
body {
background-image: url("http://sherly.mobile9.com/download/media/656/49_ybQFKMAV.png");
background-repeat: no-repeat;
background-size: cover;
height:4400px;
}
j查询
$(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');
});
});
一个很好的例子是 from flickr after zooming in on an image .
或者这个人的网站:http://ericportfolio.com/
最佳答案
您应该将背景分离成它自己的一个元素。
元素样式:
.background
{
will-change: transform;
}
准备渲染引擎以将其提升到自己的合成层。这使得 transform 更改更便宜。
通过 translateX(...) translateY(...) 而不是背景位置为 transform 设置动画。
为了平滑移动，您可以跟踪最近几次位置变化并取平均。
具有 10 个样本平滑的示例:
const root = document.querySelector(".root");
const bg = document.querySelector(".background");
const positions = [];
root.addEventListener("mousemove", e => {
const x = -(e.pageX + bg.offsetLeft) / 50;
const y = -(e.pageY + bg.offsetTop) / 50;
positions.push({ x, y });
const averageCount = 10;
if (positions.length > averageCount)
positions.splice(0, 1);
const current = positions.reduce((acc, e) => { acc.x += e.x; acc.y += e.y; return acc }, { x: 0, y: 0 });
current.x /= positions.length;
current.y /= positions.length;
bg.style.transform = `translateX(${current.x}px) translateY(${current.y}px)`;
});.root
{
position: relative;
}
.background
{
will-change: transform;
width: 100%;
height: 100%;
}
.overlay
{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}<div class="root">
<img class="background" src="/image/35oj3.png"/>
<h1 class="overlay">Lorem Ipsum</h1>
</div>关于javascript - 使用背景 mousemove 脚本平滑移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49457408/