Curved image path when scrolling page

I'm trying to create a rollercoaster ride for a project and need the rollercoaster to follow a path.

You can see my illustration on rollercoaster

I need the red box to follow the rollercoaster road in the background? The red box illustreres the image I'm going to use. Is this possible? I'm trying using this code...

<script type="text/javascript">

        $(window).on('scroll', function(e) {
            var scrollTop = $(window).scrollTop();
            //var windowHeight = $(window).height();
            var windowHeight = $('.road2').height();
            //var S = scrollTop + Math.floor(windowHeight / 2);

            var S = $(this).scrollTop();            // scrolled distance
            var t = 0 + (S/windowHeight);                
            //var T = 0 + (S/36);                        // value for Top
            //var L = 300 + Math.abs(Math.sin(S/400)*460);  // value for Left
            //
            //$(".rollerImage").css({top: T+'%', left: L+'px'});    //set CSS

            var canvas_X=400;
            var canvas_Y=400;

            // Increment Parameterization
            t += 0.05;

            // Width of Car
            var car_X=150;
            // Hieght of Car
            var car_Y=50;

            // Point A
            var a_X=0;
            var a_Y=0;

            // Point B
            var b_X=canvas_X-car_X; //Place point B at the end
            var b_Y=0;

            // Center of Semi Circle
            var c_X=(b_X-a_X)/2;
            var c_Y=(a_Y-a_Y)/2;

            // Calculate X and Y point on trajectory 
            var x = a_X + t * (b_X- a_X);
            var y = Math.sqrt(Math.pow((b_X - a_X),2)/4 + Math.pow((x-c_X),2));

            $(".rollerImage").css({top: x+'px', left: y+'px'});    //set CSS

        });            
    </script>

Hope someone can help with this type of path animation. Maybe it is possible to define the path in a array of coordinates?

I've tried using joel scrollpath, but can't "bind" an image to the path :(

//Graahf

Solution

I've tried to get it working with the jQuery Scrollpath using your html and css files plus the code from the demo site.

Check if this is OK for you: http://jsfiddle.net/Skr4R/6/embedded/result/

You can also check the sources of the fiddle: http://jsfiddle.net/Skr4R/6/

Important for this, is that the entire wrapper moves and rotates, that is why in my solution the train-image is outside of the wrapper, like this:

<div class="rollerCoasters">
  <img src="" style="background:red; height:100px; width:50px; position:absolute; top:380px; left:50%; z-index:200; margin-left:-25px">
</div>

<div class="wrapper">
  <div class="road1"><img src="base64-encoded-img" width="1434" height="539"/></div>
</div>

Hope this gets you started. It might not be the best solution, if you want the train to move, and not it's surroundings.