Question

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

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

Answer 3

粗略和快速实现此目的的方法是延迟滚动处理程序的执行..

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

Answer 4

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

http://easings.net/

滚动时缓动旋转动画

4 个答案: