提高mousemove事件触发的视差效果的性能

Question

我做了一个视差效果here inspired by this website。目前它监听 mousemove 事件并使用 CSS 转换来做视差。我还使用了 lodash 的 throttle 函数，所以事件不会经常被触发。

伪代码：

let parallax = (e) => {
  // calculate deltas of mouse x and y from the midpoint
  // multiplier = 0.01
  // for every parallax image
  //   translate image (multiplier * dx, multiplier * dy)
  //   multiplier *= 0.8 
}
document.addEventListener('mousemove', _.throttle(parallax, 10));

然而，它的性能仍然不是最佳的，我想知道我可以做些什么来改进它？

增加油门时间会导致非常明显的滞后。我也在研究使用 canvas 和 requestAnimationFrame，但我不确定它们的性能如何与使用 CSS 相提并论。

Answer 1

我重做了你的视差效果以使用 3d 定位和透视变化。

视角变化模拟改变你的观点。

物体应该有一个 z 位置，使它们相对或多或少地移动，就像在现实世界中一样

它现在应该运行更有效率，因为所有这些都是在单个属性更改中处理并在 GPU 上执行的

  let bg = document.querySelector('.background');
  let rect = bg.getBoundingClientRect();
  let midX = rect.left + rect.width / 2;
  let midY = rect.top + rect.height / 2;

let parallax = (e) => {

  let dx = e.clientX - midX;
  let dy = e.clientY - midY;

  let mult = -0.5;
  let perspective = `${dx * mult}px ${dy * mult}px`;
  bg.style.perspectiveOrigin = perspective;
}

document.addEventListener("mousemove", parallax);

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background {
  background-color: whitesmoke;
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  perspective: 500px;
  transform-style: preserve-3d;
}

img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 200px;
  margin: auto;
}

.one {
  top: 100px;
  width: 300px;
  transform: translateZ(1px);
}

.two {
  top: 0px;
  width: 300px;
  transform: translateZ(100px);
}

.text {
  line-height: 400px;
  width: 200px;
  position: relative;
  z-index: 1000;
  text-align: center;
  color: red;
  transform-style: preserve-3d;
  transform: translateZ(200px);
}

<div class="background" style="perspective-origin: -18.025px 14.15px;">
  <h1 class="plax text">Hello.</h1>
  <img class="plax two" src="http://www.etiennegodiard.com/wp-content/uploads/2017/06/YokaVendredi-copie-min.png">
  <img class="plax one" src="http://www.etiennegodiard.com/wp-content/uploads/2017/04/Yokaombre5.png">
</div>

提高mousemove事件触发的视差效果的性能

Improving performance of parallax effect triggered by mousemove event

javascript

mouseevent

css-transforms