Copied right from the site you linked to:
If you want to use pre-made animations from that site, you first need to add that code to your project. You can either download it from the website you linked to or you can just point to it.
The first one would be done adding
<link rel="stylesheet" href="css/animations.css">
to the of your HTML document and changing the href attribute for where you actually store it on your website.
The second one will be instead of using local path, you would point to the original website with the code and so your href attribute would look like this:
<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/animations.css">
Then you will need to Add jQuery to the <head> element of your webpage:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Add this before the </body> tag to trigger the animation when the user scrolls to the element:
<script>
$(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});
</script>
Replace #animatedElement with the ID or class of the element you want animated.
Replace slideUp with an animation class.
400 represents the space between the element and the top of the screen. The animation activates when the element is 400px from the top of the screen. Increase this number to make the animaton activate sooner.
