title: Animate.css trigger entrance animations when scrolling down
body: <p>I'm using Foundation4 as my framework and I want fadein animations to trigger when scrolling down. More like this website: www.isaacpvl.com . I have four divs and they're responsive if these information matters. Thanks to whoever answers! I already tried using firebug and I still can't find how. I'm a newbie when it comes to javascript.
  Here are the codes I've done so far. It's just a mock-up to see how things would look like, not too much on the design yet.</p>
  
  <pre><code>    &lt;div class="row"&gt;
    &lt;div style="background-color: black;" id="head" class="large-12 columns"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div style="background-color: red;" id="section1" class="large-6 columns"&gt;
  
    &lt;/div&gt;
    &lt;div style="background-color: red;" id="section1" class="large-6 columns"&gt;
    &lt;img class="animated fadeInRight" src="img/hongkong/hongkongdragon.gif" /&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div style="background-color: blue;" id="section2" class="large-12 columns"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>that's the body so far and the css of the divs</p>
  
  <pre><code>.row.full-width { width: 100%; max-width: 100%; }
  .row {min-width:100% !important; background-color: black;}
  .section1{
      /*background-image: url("../img/hongkong/background.png");*/
      background-color:red;
      position: relative;
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
  }
  
  .section2{
      /*background-image: url("../img/hongkong/background.png");*/
      background-color: black;
      position: relative;
      background-position: top center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
  }
  </code></pre>
  
  <p>As you can see there is an image source with the animated class, that's the image that I want to animate. It's a full-screen kind of website. </p>
  
  <p>I'm using animate.css from <a href="http://daneden.me/animate/" rel="nofollow">http://daneden.me/animate/</a> btw</p>