jQuery Plugin To Animate Html Elements When In Viewport - flowup

flowup is a simple jQuery plugin that reveals and animates the invisible Html elements with a 'flow-up' effect when you scroll down the page. Based on CSS3 animations and transforms. Inspired by the google+ app on android.

How to use it:

1. Include the jQuery library and jQuery flowup script in the footer of your page so the page load faster.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="flowup.js"></script>

2. Create the html elements you want to flow up once they're scrolled into view.

<section>
Section 1
</section>

<section>
Section 2
</section>

<section>
Section 3
</section>

...

3. Call the plugin on the section elements with options.

<script>
$(document).ready(function() {
$("body").flowUp("section", { 
transalteY: 350, // The amount of pixels that each element will be below the active window.
duration: 1 // in seconds
});
});
</script>

---

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