title: How can I make an animation after Pageload
body: <p>I want to create a page where the animations will be seen while scrolling down the page, not at once.</p>
  
  <p>I've already created a page with four css3 animations. It's animating now at once while the pages loads. I want it to animate when scrolling down the page.</p>
  
  <p>I've heard that jquery can do it, But i can't implement there.</p>
  
  <p>I've tried jquery but not working. kindly help.</p>
  
  <p>Here is my faulty codes:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(window).load(function() {
          $("#one").delay(100).fadeInUp();
          $("#two").delay(300).fadeInDown();
          $("#three").delay(600).fadeInRight();
          $("#four").delay(700).fadeInLeft();
          $("body").delay(500).queue(function(next){$(this).addClass("fadeInUp");next();})
      })
  </code></pre>
  
  <p></p>
  
  <p>The divs #one, #two, #three and #four each has an animation. It's animating at once. But i want it to load when scrolling down. just like: <a href="http://knockknockfactory.com" rel="nofollow">http://knockknockfactory.com</a>  .  The codes are available at Github. see above please.</p>