Animate.css trigger entrance animations when scrolling down - animation

Question

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.
<div class="row">
<div style="background-color: black;" id="head" class="large-12 columns">
</div>
</div>
<div class="row">
<div style="background-color: red;" id="section1" class="large-6 columns">
</div>
<div style="background-color: red;" id="section1" class="large-6 columns">
<img class="animated fadeInRight" src="img/hongkong/hongkongdragon.gif" />
</div>
</div>
<div class="row">
<div style="background-color: blue;" id="section2" class="large-12 columns">
</div>
</div>
that's the body so far and the css of the divs
.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;
}
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.
I'm using animate.css from http://daneden.me/animate/ btw