旋轉滾動元素，最簡單的方法是什麼？

在我實習的網站上，我想製作一個箭頭，一旦用戶滾動下來就會變平。我試圖用jQuery做到這一點，但這對瀏覽器來說似乎非常沉重。旋轉滾動元素，最簡單的方法是什麼？

對於這個函數，我使用的.scroll（）函數和計算，使箭頭（三角形）更平坦，一旦用戶向下滾動：

$(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)'}); 
});

我還經由三角形圖像嘗試這樣做，並簡單地扁平化圖像。這也是沉重的。

有沒有更重的方式來做到這一點？

來源

2016-04-20 Maarten Wolfsen

我建議總是使用CSS變換，因爲這應該只觸發畫圖，而不是迴流或佈局。 - 另外，確保你在'onscroll'事件函數上使用'throttle'。 – evolutionxbox

這是通過css轉換完成的，我剛剛發佈了源代碼 –

也許在每次觸發滾動事件時都不計算'$（window）.height（）/ 7.3'。 - [這裏是一個JS節流的例子]（http://benalman.com/projects/jquery-throttle-debounce-plugin/） – evolutionxbox

你可以嘗試：

創建一個全局可達變量「is_scrolling」，它在滾動事件設置爲true（如果它是不正確的）。
如果用戶停止滾動，請使用here中的代碼將該變量設置爲false
使用setTimeout進行旋轉。您可以使用超時時間和每步度數（如果旋轉獨立於滾動位置）來管理速度，否則使用您的計算。

優點是，這是從滾動事件中分離出來的。您無法控制滾動事件觸發的頻率，但觸發您可以控制的setTimeout中的功能。

來源

2016-04-20 13:30:04 TehSphinX

我會嘗試這些事情，謝謝！ –

旋轉滾動元素，最簡單的方法是什麼？

回答

相關問題