title: Triggering a div animation by scrolling
body: <p>Im working on a horizontal-scrolling website. The website has a large background image (5000px width). Now, I have div's with content that are currently at display:hidden. I know how to fade them in, but I need them to enter into view dynamically as I scroll to the right, and I would like to trigger these divs using percentages. </p>
  
  <p>Example: user begins to scroll right, once they hit 20% width, first div enters into view (from right). User then continues to scroll until they hit 40% width, first div animates away (to the left) and next div enters into view (from right).</p>
  
  <p>Any idea how I can accomplish this with jQuery??</p>
  
  <p>Here is a bit of code... At the moment I have links that trigger some basic animations. But nothing for manual scrolling. Oh and im using this great pluggin called ScrollTo for the percentages.</p>
  
  <p>HTML
      
       
       
      </p>
  
  <pre><code>&lt;div id="eat" class="sections"&gt;
   &lt;div class="content"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="see" class="sections"&gt;
   &lt;div class="content"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="meet" class="sections"&gt;
   &lt;div class="content"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="find" class="sections"&gt;
   &lt;div class="content"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="background"&gt;
   &lt;img src="images/test.jpg" alt="" id="bg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.sections {position:absolute; right: 0; width:700px; height: 100%; min-height: 650px; z-index: 10; background-color: rgb(0,0,0);}
  #drink, #eat, #see, #meet, #find {margin: 0px; padding: 0px;}
  .content {margin: 20px; padding: 0px; outline: 1px solid red;}
  h1 {color:#FFF; margin: 10em auto 0px auto;}
  #background {height:103%; min-height: 670px; overflow-x: scroll; overflow-y: hidden; z-index: 9;}
  #background img#bg {height: 100%; min-height: 650px; margin: 0px; padding: 0px;}
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$("document").ready(function() {
  
  $('#link1').click(function(){
      $('#background').scrollTo('20%', 1500);
          var div = $('#drink');
          div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() {
          });
          $('#logo, #eat, #see, #meet, #find').fadeOut(500);          
          $('#drink').fadeIn(500);
  });
  
  $('#link2').click(function(){
      $('#background').scrollTo('40%', 1500);
          var div = $('#eat');
          div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() {
          });
          $('#logo, #drink, #see, #meet, #find').fadeOut(500);
          $('#eat').fadeIn(500);
  });
  
  $('#link3').click(function(){
      $('#background').scrollTo('60%', 1500);
          var div = $('#see');
          div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() {
          });
          $('#logo, #drink, #eat, #meet, #find').fadeOut(500);                
          $('#see').fadeIn(500);
  });
  
  $('#link4').click(function(){
      $('#background').scrollTo('80%', 1500);
          var div = $('#meet');
          div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() {
          });
          $('#logo, #drink, #eat, #see, #find').fadeOut(500);
          $('#meet').fadeIn(500);
  });
  
  $('#link5').click(function(){
      $('#background').scrollTo('100%', 1500);
          var div = $('#find');
          div.animate({right: $(window).width()/2 - div.outerWidth()/2}, {duration: 1500, queue: false}, function() {
          });
          $('#logo, #drink, #eat, #see, #meet').fadeOut(500);
          $('#find').fadeIn(500);
  });
  
  });
  </code></pre>