改善由mousemove事件触发的视差效果的性能

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>