jQuery ScrollFlow Plugin

esKju's jQuery ScrollFlow Plugin

What is it?

Enhance your website by fancy effects based on the user's scroll index. Pop-in, pop-out, sliding, sticky notes and much more. The plugin supports mobile devices and eldered browsers. It was built using the jQuery library. Licensed under MIT and GPL licenses.

Features

• Eased animations for incremental mouse scroll-wheels
• Adds fancy effects to your homepage
• Customizable trough settings and CSS
• Highly compatible
• Highly customizable
• Uses CSS3 transitions by default

Source: cwdesigns.de

1. INCLUDE JS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/eskju.jquery.scrollflow.js"></script>

2. HTML

Add "scrollflow" and at least one of the following CSS classes to the desired object(s): slide-top, slide-left, slide-right, slide-bottom, -pop, -opacity

<h1 class="scrollflow -slide-top -opacity">Slide-Top with opacity fading</h1>
<p class="scrollflow -pop -opacity">Pop-Effect</p>

3. JAVASCRIPT

If you are not familiar with jQuery, please, read this tutorial for beginners.

$( document ).ready( function( )
{
    new ScrollFlow(); 
} );

4. OPTIONS

Easy plugin, easy life. Configure things just to taste :)

$( document ).ready( function( )
{
    ScrollFlow( {
        your: "option",
        will: "be",
        the: "best"
    });
} );

5. HTML ATTRIBUTES

<h2 id="myObject" data-myattribute="myvalue">MyText</h2>