CODEWITHSUNDEEP
javascriptjquerycssxhtmljquery-plugins
Jitendra Vyas
Jitendra Vyas

Reputation: 152657

How to make speed of scrolling more slower in this jQuery scrolling script?

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

Upvotes: 0

Views: 3350

Answers (3)

GregL
GregL

Reputation: 38113

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.

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

bigger ammount of speed makes the cloud move slow.

bigger ammount of step makes the cloud move fast.

demo

Upvotes: 2

nedk
nedk

Reputation: 663

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.

Upvotes: 2

Related Questions