jQuery Plugin For Magical Scroll Animations Using CSS3 - scroll-animate

Yet another jQuery scroll animation plugin which applies fancy CSS3 animations to specified elements when they come into view. CSS3 animations based on the popular Animate.css library created by Daniel Eden. Very easy to use and weights in only 1kb. Great for creating impressive one page scroll websites or single page web applications.

How to use it:

1. Place the required animate.css in the document's head section.

<link rel="stylesheet" href="animate.min.css">

2. Use the data-animate attribute to specify the animation type for each desired element.

<h1 data-animate="tada">jQuery scroll-animate Plugin Demo</h1>
<p data-animate="fadeInUp">Text Here</p>
<h2 data-animate="fadeInDown">Scroll Down ...</h2>
<div style="margin-top: 2000px;">
  <img data-animate="flipInX" src="https://unsplash.it/400/300?image=281">
</div>

3. Place the jQuery library and the jQuery scroll-animate plugin at the bottom of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="dist/jquery.scroll-animate.js"></script>

4. Active the plugin.

$('[data-animate]').scrollAnimate();

---

This awesome jQuery plugin is developed by SiroDiaz. For more Advanced Usages, please check the demo page or visit the official website.