Question

I am newbie in JS. Right now i am working on an effect in which i want when page scroll first time then the natural motion animation starts but it’s creating a problem because when i scroll the element animation became fast.

Check this more you got the idea.

http://jsfiddle.net/byvLy/

Answer 1

i know that this is a swinging box (figured it out due to the Math.sin())

however, you have to note that scrolling event is fired every few milliseconds during scrolling. in your code, you are calling animate and creating an interval every time the scroll event is fired. that’s why your animation is jumpy;

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