放鬆滾動旋轉動畫

我有一個元素，我正在使用jQuery/css3滾動滾動。麻煩的是，當你滾動時，它會有點跳動，當你停下來時它會立即停止。我希望它更像是一種平滑的播放旋轉，當您開始滾動時開始，然後在您停止滾動後輕鬆停止，而不是每次滾動輪移動時旋轉一組度數。我的代碼和鏈接低於：放鬆滾動旋轉動畫

http://pollenbrands.com/rjj/（向下滾動到100％的水果）

var angle = 1; 
jQuery(window).scroll(function() { 
    jQuery(".rotate").css('-moz-transform', 'rotate('+angle+'deg)').css('-webkit-transform', 'rotate('+angle+'deg)').css('-o-transform', 'rotate('+angle+'deg)').css('-ms-transform', 'rotate('+angle+'deg)'); 
    angle+=6; 
    if(angle==360) { 
     angle=0; 
    } 
});

來源

2012-04-16 PollenBrands

您是否嘗試過使用.animate？這可能有助於你控制這種行爲。

來源

2012-04-16 17:18:07 neuDev33

使用的CSS變換實際上比animate函數速度更快，因爲CSS通常是硬件加速。 – Jlange 2012-04-16 17:22:16

@Jlange，是不是完全依賴於瀏覽器類型和操作系統？ – Sparky 2012-04-16 17:26:44

大多數現代瀏覽器（Firefox，Chrome，IE）都使用css的硬件加速。這是獨立於操作系統的，因爲瀏覽器本身是爲特定操作系統編寫的。（從他的問題來看，他的目標是Mozilla瀏覽器，這絕對是硬件加速的）。 – Jlange 2012-04-16 17:28:40

看來問題可能是動畫附加到滾動功能。每次用戶滾動時都會調用它，因此它在前一次有機會完成之前開始一個新的轉換。您可能想要嘗試觸發一個較長的事件（如更大程度的旋轉），當用戶第一次滾動時，然後推遲將來的事件，直到第一個事件有時間完成。根據你的緩動函數，你可以使用帶標誌的setTimeout（）方法。

來源

2012-04-16 17:21:35 Jlange

謝謝，這個問題是，使用緩動，動畫會慢下來，然後再次開始，所以旋轉速度會不一致。我真的很喜歡它開始旋轉並保持相同的速度，直到用戶停止滾動，然後減速停止。 – PollenBrands 2012-04-16 23:33:11

那麼你可能想試試這個插件，http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ 它可以讓你確定用戶何時滾動，（因爲這個功能不是原生的瀏覽器） – Jlange 2012-04-16 23:35:50

實現，這將是延緩滾動處理程序的執行的原油和快速方式..

$(window).scroll(function() { 
    setTimeout(function(){ 
     //Call scroll functionality here.. 
    }, 300); 
});

來源

2012-04-16 17:28:14

謝謝，我試過這個，以及我在上面評論中提到的問題，它只是在頁面上引起一些普遍的不安。 – PollenBrands 2012-04-16 23:33:38

我會neuDev33同意。爲滾動功能使用動畫和緩動。像easeOutCirc可能很好地工作。這裏有一個很好的作弊表。

http://easings.net/

來源

2013-06-25 14:41:26 Jacksnap13

放鬆滾動旋轉動畫

回答

相關問題