This will be a simple tutorial for Animate.css and jQuery Waypoints and how I use them together. Basically we will use Waypoints to know when the user scrolls to an elements and trigger a CSS3 animation to make our sites more sassy. Although this tutorial is quite straight forward you might need a basic understanding of JQuery and HTML.
Well for a brief explanation of both projects Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects and Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.
First we need to add Animate.css to our html, so link it to your head:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
To add an animation you need to add the animated class and the name of the animation, like so:
<img class="animated bounce" src="logo.png">
This will make it move!!! Cool, but it will only do it on load and it will only do it once.
This is where JQuery Waypoints comes in. I will use it so we know when the user scrolls to the element and trigger the animation. To add Waypoints add this tags at the bottom of your body in your html.
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>
Waypoints can be hard to understand at first, but in plain terms it triggers when the element hits the top of the window or viewport. Waypoints has a lot of cool features like adding an offset so it triggers when the element is in the middle of the viewport, add a callback to the waypoint, know the direction of the scroll and a lot more!!
So first lets code a waypoint. We will need a bit of JQuery knowledge, but the code is quite straightforward. We make a JQuery object and get the id of the element we want to animate in this case #example. We call the waypoints function and tell it to toggle the bounce animation when the element hits the bottom of the viewport.
$('#example').waypoint(function() {
$(this).toggleClass('animated bounce');
},
{ offset: 'bottom-in-view' });
Now this will only trigger when it reaches the bottom. Personally I like it to work when you scroll from the top and from the bottom. So the code we need to add is quite simple.
$('#example').waypoint(function() {
$(this).toggleClass('animated bounce');
},
});
Now I use a little modification to this method. I take use of the html a little more and get the type of animation from the element. For this I add the animated class to each element I want to have an animation and I add a data attribute telling me the type of animation like so.
<img class="animated" data-animated="bounce" src="logo.png">
And the javascript code will look something like this.
With this I take the animated data attribute from each element that has the class animated and toggle the animation. I have two separate functions in case you want a specific behavior.
I hope you like this tutorial, please leave any comment or question you have right below.
in case you crave more
Animate.css
JQuery Waypoints