Ein Element auf Scroll drehen, was ist der leichteste Weg?

Question

Auf einer Website, die ich bei meinem Praktikum mache, möchte ich einen Pfeil machen, der flach wird, sobald der Benutzer herunterscrollt. Ich habe versucht, dies mit jQuery zu machen, aber das schien für den Browser sehr schwer.

Für diese Funktion habe ich die .scroll() Funktion, und eine Berechnung, die auf den Pfeil (Dreieck) flacher sobald der Benutzer nach unten scrollt macht:

$(window).scroll(function(e){ 
    triangleRotation = 5.6125 - ($(window).scrollTop()/($(window).height()/7.3)); 
     if (triangleRotation <= 0) { 
     triangleRotation = 0; 
     } 
     $('.triangle-left').css({'transform': 'rotate(' + triangleRotation + 'deg)', '-webkit-transform': 'rotate(' + triangleRotation + 'deg)', '-moz-transform': 'rotate(' + triangleRotation + 'deg)'}); 
     $('.triangle-right').css({'transform': 'rotate(-' + triangleRotation + 'deg)', '-webkit-transform': 'rotate(-' + triangleRotation + 'deg)', '-moz-transform': 'rotate(-' + triangleRotation + 'deg)'}); 
}); 

Ich habe versucht, dies auch über ein Dreieck geformt Bild und glätten Sie das Bild einfach. Dies war auch zu schwer.

Gibt es einen weniger schweren Weg, dies zu tun?

Answer 1

Sie könnten versuchen, zu:

• ein global erreichbar Variable ‚is_scrolling‘ erstellen und auf true im Scroll-Ereignisse festgelegt (wenn es nicht wahr ist).
• Verwenden Sie den Code von here, um die Variable auf "false" zu setzen, wenn der Benutzer den Bildlauf angehalten hat
• Verwenden Sie zum Drehen "setTimeout". Sie können die Geschwindigkeit mit der Timeout-Zeit und den Graden pro Schritt verwalten (wenn die Rotation unabhängig von der Scroll-Position ist), ansonsten verwenden Sie Ihre Berechnung.

Vorteil ist, dass dies vom Scrollen Ereignis entkoppelt ist. Sie haben keine Kontrolle darüber, wie oft das Scrollereignis ausgelöst wird, sondern das Auslösen der Funktion in setTimeout, die Sie steuern können.