I came across the need of adding an animated background image with jQuery to a website I recently designed and built.  I stumbled upon this plugin solution from Queness, covering this by manipulating the css ‘background-position’ property:

(function() {
    $.fn.bgscroll = $.fn.bgScroll = function( options ) {

        if( !this.length ) return this;
        if( !options ) options = {};
        if( !window.scrollElements ) window.scrollElements = {};

        for( var i = 0; i < this.length; i++ ) {

            var allowedChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
            var randomId = '';
            for( var l = 0; l < 5; l++ ) randomId += allowedChars.charAt( Math.floor( Math.random() * allowedChars.length ) );

                this[ i ].current = 0;
                this[ i ].scrollSpeed = options.scrollSpeed ? options.scrollSpeed : 70;
                this[ i ].direction = options.direction ? options.direction : 'h';
                window.scrollElements[ randomId ] = this[ i ];

                eval( 'window[randomId]=function(){var axis=0;var e=window.scrollElements.' + randomId + ';e.current -= 1;if (e.direction == "h") axis = e.current + "px 0";else if (e.direction == "v") axis = "0 " + e.current + "px";else if (e.direction == "d") axis = e.current + "px " + e.current + "px";$( e ).css("background-position", axis);}' );

                setInterval( 'window.' + randomId + '()', options.scrollSpeed ? options.scrollSpeed : 70 );
            }

            return this;
        }
})(jQuery);

SOURCE: Queness
CREDIT: Steve at Web Developer Juice

This plugin gives you access to these properties:

scrollSpeed : speed of the movement
direction : the scroll orientation being either “v”, “h” or “d” (horizontally, vertically or diagonally)

Although this works perfectly,the scrolling works with negative pixel values only – in other words scrolling only heads towards the left of the browser screen.  I felt the need to tweak the script slightly so that the user could decide for the scrolling to head to the left, as well as the right.  Below is an alternative tweaking the original plugin slightly to allow scrolling to head either towards the right or the left, in effect expanding the capabilities of this nifty plugin.

(function() {
    $.fn.bgscroll = $.fn.bgScroll = function( options ) {

        if( !this.length ) return this;
        if( !options ) options = {};
        if( !window.scrollElements ) window.scrollElements = {};

        for( var i = 0; i < this.length; i++ ) {

            var allowedChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
            var randomId = '';
            for( var l = 0; l < 5; l++ ) randomId += allowedChars.charAt( Math.floor( Math.random() * allowedChars.length ) );

                this[ i ].current = 0;
                this[ i ].scrollSpeed = options.scrollSpeed ? options.scrollSpeed : 70;
                this[ i ].direction = options.direction ? options.direction : 'h';
                this[ i ].heading = options.heading ? options.heading : 'l';
                window.scrollElements[ randomId ] = this[ i ];

                eval( 'window[randomId]=function(){var axis=0;var e=window.scrollElements.' + randomId + ';
                       if (e.heading == "r") e.current += 1; else if(e.heading == "l") e.current -= 1;
                       if (e.direction == "h") axis = e.current + "px 0";else if (e.direction == "v") axis = "0 " + e.current + "px";else if (e.direction == "d") axis = e.current + "px " + e.current + "px";$( e ).css("background-position", axis);}' );

               setInterval( 'window.' + randomId + '()', options.scrollSpeed ? options.scrollSpeed : 70 );
            }

            return this;
        }
})(jQuery);

A ‘heading’ property is added to the already two that exist in this plugin.  This ‘heading’ property allows simply to gear the animation towards the left(“l”) or the right(“r”).  The below example shows how this is used:

$('#clouds').bgscroll({scrollSpeed:70 , direction:'h', heading: 'r'});
$('#aeroplane').bgscroll({scrollSpeed:10 , direction:'h', heading: 'l'});

And that’s it really!!  Hope this helps.

VIEW DEMO