Verbessern der Leistung von Parallaxe-Effekt ausgelöst durch Mousemove-Ereignis

Question

Ich machte eine Parallax-Effekt here inspiriert von this website. Momentan wartet es auf Mousemove-Ereignisse und verwendet CSS-Transformationen, um die Parallaxe durchzuführen. Ich benutze auch die Drosselfunktion von lodash, damit das Ereignis nicht so oft ausgelöst wird.

Pseudocode:

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

jedoch die Leistung dieser ist noch nicht optimal, und ich habe mich gefragt, was ich konnte es zu verbessern?

Die Erhöhung der Gaszeit führt zu einer sehr deutlichen Verzögerung. Ich habe auch in die Verwendung von Canvas und requestAnimationFrame geschaut, aber ich bin mir nicht sicher, wie die Leistung davon gegen die Verwendung von CSS stapelt.

Answer 1

Ich habe Sie Parallax Efect überarbeitet, um 3D-Positionierung und perspektivische Änderungen zu verwenden.

Die perspektivische Änderung simuliert die Änderung Ihres Standpunkts.

die Objekte sollten az Position, die sie relativ mehr oder weniger, wie in der realen Welt macht bewegen

Es sollte viel effizienter jetzt laufen, da dies alles in einer einzigen Eigenschaftsänderung behandelt und ausgeführt wird auf die 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>