滚动时缓动旋转动画

我有一个元素，我使用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; } }); 

Answer 1

你尝试过使用.animate吗？ 这可能有助于您控制此行为。

Answer 2

实现这一目标的一种粗略而快捷的方法是延迟滚动处理程序的执行。

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

Answer 3

似乎问题可能是将动画附加到滚动function。 每次用户滚动时都会调用它，因此它在前一个有机会完成之前开始新的转换。 当用户第一次滚动时，你可能想要尝试触发一个更长的事件（比如旋转更大的程度），然后推迟任何未来事件，直到第一个事件有时间结束。 根据您的缓动函数，您可以使用带有标志的setTimeout（）方法。

Answer 4

我同意neuDev33。 使用动画和缓动滚动function。 像easeOutCirc这样的东西可能很好用。 这里有一个很棒的备忘单。

http://easings.net/