Question

我在here的启发下制造了视差效果this website。目前，它侦听mousemove事件并使用CSS变换来执行视差。我也使用lodash的节流功能，因此事件不会经常被解雇。

伪代码：

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事件引发的视差效果

1 个答案: