滚动轻松旋转动画 [英] Easing rotation animation on scroll

问题描述

我有一个元素，我正在使用jquery/css3进行滚动滚动.麻烦在于，滚动时有点跳动，停止时会立即停止.我希望它能更平滑地播放，该旋转在您开始滚动时开始，然后在停止滚动后轻松停止，而不是在每次滚轮移动时旋转一组度数.我的代码和链接如下:

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/(向下滚动到100％的水果)

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

推荐答案

您是否尝试过使用.animate?这可能有助于您控制这种行为.

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

这篇关于滚动轻松旋转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！