1. Insert jQuery & animateMePlz.js
Once you have downloaded the necessary files, place the animateMePlz.js file right above the closing </body> tag of your HTML file. It should go below jQuery.
<body>
...
<!-- insert jQuery (you can also download the file and insert it) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- insert animateMePlz.js into your html -->
<script src="path/to/animateMePlz.js" type="text/javascript"></script>
</body>
Note: If you don't know what the path/to/ is supposed to be before the animate.js file, simply drag the file into the same folder as your index.html file and leave path/to/ empty.
2. Initiate animateMePlz
Add a script tag below the first two from step #1 that initiates your function.
<body>
...
<!-- insert jQuery (you can also download the file and insert it) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- insert animateMePlz.js into your html -->
<script src="path/to/animateMePlz.js" type="text/javascript"></script>
<!-- initiate function on scroll -->
<script>
$(document).ready(function(){
$(window).scroll(function() {
$('.animateMePlz').animateMePlz();
});
})
</script>
</body>
Any HTML elements with that class (<div class="animateMePlz"></div>) will be animated upon scroll.
Note: I would recommend having a unique class name, as used above, for all elements you want animated. Using a class you already frequently have in your HTML – such as $('.container').animateMePlz() – will likely be tougher to manage at scale. If this note was confusing to you, just ignore it and do exactly as shown above.
3. Insert animate.css
You can insert animate.css via CDN by copying what I entered below. Make sure this is in the <head> of your document. You can also download the file from Dan Eder's website.
<head>
...
<!-- animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
4. Apply to elements
Add the class 'animateMePlz' to any element you want to animate.
<body>
...
<div class="animateMePlz">
Fade this div in!
</div>
</body>
The default animation is fadeIn. If you would like to choose a different animation, after installing the plugin, check out the available customizations.