页面滚动时平滑自然运动

Question

我是JS的新手。现在我正在制作一个效果，我想在页面滚动第一次然后自然运动动画开始但它创建一个问题，因为当我滚动元素动画变得快。

更多地了解你的想法。

http://jsfiddle.net/byvLy/

Answer 1

我知道这是一个摆动的盒子（由于Math.sin()计算出来）

但是，您必须注意滚动期间每隔几毫秒就会触发滚动事件。在您的代码中，每次触发滚动事件时，您都会调用animate并创建一个间隔。这就是为什么你的动画是跳跃的;

try this instead：

$(function() {

    $(window).on('scroll', function() {
        swing.start('.cloud1, .cloud2');
    });

    var swing = (function() {
        var animated = false;

        function startAnimation(selector) {
            if (!animated) {
                var banner = $(selector);
                var start = 0;

                animated = true;
                window.setInterval(function() {
                    banner.css('left', 100 * Math.sin(start) + 80);
                    start += 0.1;
                }, 30);
            }
        }
        return {
            start: startAnimation
        }
    }());
});​