Create on scroll animation effects on your website using waypoints and animate.css.
Waypoints allows developers to execute a function when an element is scrolled to, in this case, we will execute an animation.
Animate.css is a library of CSS animations that can be activated by simply adding classes to elements you wish to animate.
After including all of the necessary js and css files to your document, you can add the example classes “animate fadeInUp“. You will notice that these animations are activated on page load. If you would like it activated on page scroll using waypoints, remove the classes from the element, add opacity:0; to the element and then use this code snippet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$(document).ready(function() { // use this snippet on single element $('.special-div').waypoint(function() { $(this.element).addClass('animated fadeInUp'); },{ offset: '80%' }); //use this snippet if there are multiple, consecutive divs with same class $('.special-div-alt').each(function() { $(this).waypoint(function() { $(this.element).addClass('animated fadeInUp'); }, { offset: '80%'}); }); }); |