Scroll window left 2000px, then up 500 px, then left again, jQuery
<p>Im trying to build a horizontal site that when the user scrolls down with his mouse, the window moves left X (2000px) pixels, then when it gets to the end, the window starts to scroll up 500 px, then after that action, the window continues to scroll left again. </p>

<p>I have the follwoing so far but the user can continue scrolling left and im unsure where to go next? </p>

<pre><code>&lt;script&gt;
    $(document).ready(function(){

         var height = $(window).height();
         var width = $(window).width();

         // Make each section 100% height and width 
         $('section').each(function(){
             $(this).css({'width' : width, 'height' : height});
         });

         // Calculate and set body width
         var sectionWidth = $('section').width();
         var twoWidth = sectionWidth * 2;
         var threeWidth = sectionWidth * 3;
         var moveUp = $('section').height();
         $('body').css({'height' : moveUp, 'width' : threeWidth});
         $('.row').each(function(){
             $(this).css({'width' : threeWidth});
         });
         $('.secondThree').css({'top':  '-' + moveUp + 'px', 'left': twoWidth + 'px'});

         // Scroll Horizontally 
         $(function() {
             $('html, body').mousewheel(function(event, delta) {
                 this.scrollLeft -= (delta * 30);
                 event.preventDefault();
             });
         });

         // After 3rd section, move up * height
         var firstThree = false;
         $(window).scroll(function(){
             var secondThree = $(window).scrollLeft()&gt;sectionWidth * 2;
             if (secondThree &amp;&amp; !firstThree) {
                  firstThree = true;

                  var elevatorStart = $(window).scrollLeft();
                  if(twoWidth &lt; elevatorStart){


                     $('.secondThree').animate({
                        top: 0
                      }, 5000, function() {
                        // Animation complete.
                      });


                       $('.firstThree').animate({
                        top: moveUp + 'px'
//                          left: twoWidth + 'px'
                      }, 5000, function() {
                        // Animation complete.
                      });




                   };
             } else if (firstThree &amp;&amp; !secondThree) {
                  firstThree = false;
            }
        });

    });
&lt;/script&gt;
</code></pre>
