Question

I’m trying to recreate something I have seen on another website Ben the Bodyguard and I’m just wondering how it is done, I understand it’s some kind of loop but I’m unsure of how to go about it.

Basically, it’s the part where the train goes across the screen..

http://benthebodyguard.com/index.php

If you look at what I have done, it just goes to a certain point and then back, how can I get it so it goes along the screen and then back again..?

http://jsfiddle.net/VWqyw/2/

Answer 1

You could do something like this:

http://jsfiddle.net/pGvgc/2/

$(document).ready(function(){

    var windowWidth = $(window).width();    
    $("#block").css({ "left": windowWidth}); 

    $(window).scroll(function(){       
        $("#block").css({ "left":  windowWidth  - $(window).scrollTop()});
    });
});​

Basically just using the vertical scroll position to adjust the horizontal position of the block.

By the way, if your planning on doing a lot of animations on the page, it might be worth thinking about using a javascript library like KineticJS, something like that can allow you to do some great things relatively easily…