Question

我发现了如何通过鼠标移动来移动背景图像。我试图找出如何平滑运动或使其更流畅。我发现最多的是，通过划分越来越大的数字，背景运动就会减少，但这就是我所得到的。

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;
}

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');
   });    
 });

一个很好的例子是from flickr after zooming in on an image。

或者这个人的网站：http://ericportfolio.com/

Answer 1

您应该将背景分离为自己的元素。

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

.background
{
    will-change: transform;
}

启动rending引擎以将其提升为自己的合成层。这使transform更改更便宜。

通过transform而不是背景位置为translateX(...) translateY(...)设置动画。

为了平滑移动，您可以跟踪最后几个位置的变化并对其进行平均。

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="https://i.stack.imgur.com/35oj3.png"/>
   <h1 class="overlay">Lorem Ipsum</h1>
</div>

使用background mousemove脚本

1 个答案: