改善由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>