Parallax scroll, animation WITH scroll instead of activate on scroll

Question

I am diving into 'Parallax scroll' styled web pages, I can style all my main sections correctly with background image animations however when I break it down further into individual div animations I am getting stuck.

Example: Once the browser scroll hits 900px it activates a div to animate in from the left. It slides all the way into place. What I am trying to accomplish is that the animation is controlled by the user scroll completely (only animates on scroll). Hope this makes sense

Fiddle: http://jsfiddle.net/WW8xF/

HTML

<section id="one"></section>
<section id="two">

    <div class="contentBox">I am a box</div>

</section>

jQuery

$(window).scroll(function(){
    if($(window).scrollTop()<500) {
        $('.contentBox').stop().animate({ left: -500 }, { duration: 500 });
    } else {            
        $('.contentBox').stop().animate({ left: 100 }, { duration: 500 });  
    }
});

Answer 1

In this case you don't want to use animate , you want to control the position of your element yourself based on the scroll position of the window. Something like this:

http://jsfiddle.net/WW8xF/1/

$(window).scroll(function(){
    var position = Math.min($(window).scrollTop()-700, 100)
    $('.contentBox').css({ left: position });
});

You can adjust the logic of position here to affect when it moves, where it stops, etc.