Easing rotation animation on scroll

问题

I have an element that I am using jquery/css3 to rotate on scroll. The trouble is that it is kinda jumpy when you scroll, and it stops immediately when you stop. I would love for it to be more of a smooth playing rotation that starts when you start scrolling and then eases to a stop after you stop scrolling, rather then just rotating a set # of degrees each time the scroll wheel moves. My code and link is below:

http://pollenbrands.com/rjj/ (scroll down to 100% fruit)

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;
    }
});

回答1:

Have you tried using .animate? That might help you control this behavior.

回答2:

A crude and quick way to achieve this would be to delay the execution of the scroll handler..

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

回答3:

It seems that the problem may be attaching the animation to the scroll function. It is called every time the user scrolls, so it is starting a new transform before the previous has a chance to finish. You might want to try to fire one longer event, (like rotate by a larger degree), when the user scrolls the first time, and then postpone any future events until the first one has time to finish. Depending on your easing function, you might use a setTimeout() method with a flag.

回答4:

I would agree with neuDev33. Use animate and an easing for the scroll function. Something like easeOutCirc might work nicely. There is a great cheat sheet here.

http://easings.net/

来源：https://stackoverflow.com/questions/10177691/easing-rotation-animation-on-scroll

标签

jquery

css3

easing