Scroll animate for jQuery

First you must link the CSS animation classes. For this example we will use animate.css

                    
<link rel="stylesheet" href="/dist/animate.css" />
                    
                

Then insert the data-animate attribute to the HTML element that you want to animate. Add the class name inside the attribute that contains the animation. For see the scroll animation the image is going to be placed at 2000px of the top:

                    
<div style="margin-top: 2000px;">
    <img data-animate="slideInRight" src="http://lorempixel.com/640/400/">
</div>
                    
                

Finally append at the end of body tag jQuery and the plugin in the same order that in the example. Then initialize the plugin for data-animate elements.

                    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="/dist/jquery.scroll-animate.js"></script>
<script>
    $('[data-animate]').scrollAnimate();
</script>
                    
                

---

Parameters

                    
{
    startAnimation: 'animated'
}