Question

I’m making an auto-animated background swing for a web page and I don’t know how to solve that when the background is at the end to come back to the origin.

That is the code I have done from some other websites:

function scrollbackground() {
        // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
//          offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
        offset = offset - 1;
        // apply the background position
        $('body').css("background-position", "50% " + offset + "px");
        // call self to continue animation
        setTimeout(function() {
            scrollbackground();
            }, 1000
        );
    }

This works very well for moving in one direction. What I want is when the background arrives to an specific offset, “grow back” to 0.

Answer 1

Try this

var backgroundImageWidth;
var moveLeft = true;
var offset = 0;
    function scrollbackground() {

offset = moveLeft?offset-1:offset+1;
if(offset*-1 == backgroundImageWidth)
   moveLeft = false;
else if(offset == 0)
   moveLeft = true;

            // apply the background position
            $('body').css("background-position", "50% " + offset + "px");
            // call self to continue animation
            setTimeout(function() {
                scrollbackground();
                }, 1000
            );
        }