Currently in example speed and step both are are 1. but i need much slower speed of scrolling. How to get full control over speed.

I want the clouds to move much slower

Example

http://jsfiddle.net/cHZG6/1/

Code

(function($) {
    $.fn.scrollingBackground = function(options) {
        // settings and defaults.
        var settings = options || {};
        var speed = settings.speed || 1;
        var step = settings.step || 1;
        var direction = settings.direction || 'rtl';
        var animStep;

        // build up a string to pass to animate:
        if (direction =开发者_开发知识库== 'rtl') {
            animStep = "-=" + step + "px";
        }
        else if (direction === 'ltr') {
            animStep = '+=' + step + "px";
        }

        var element = this;

        // perform the animation forever:
        var animate = function() {
            element.animate({
                backgroundPosition: animStep + " 0px"
            }, speed, animate);            
        };
        animate();
    };
})(jQuery);

$("#header").scrollingBackground({
    speed: 1,
    step: 1,
    direction: 'ltr'
});

$("#header-2").scrollingBackground({
    speed: 1,
    step: 1,
    direction: 'rtl'
});

---

If you increase the speed property that will slow down the scroll because it increases the delay between the step. I tried it with a value of 100 and it looked pretty smooth still.

---

bigger ammount of speed makes the cloud move slow.

bigger ammount of step makes the cloud move fast.

demo

---

Another possible method you might want to consider is using the Spritely library. It has a pan() method that allows you to configure the speed, fps and direction and is very similar to what you are trying to do. You may prefer their implementation if you cannot get yours to work to your satisfaction.