Stroll.js – list scroll effects

Stroll.js is a collection of CSS and CSS3 list scroll effects: grow, cards (CSS 3D), curl (CSS 3D), wave, flip (CSS 3D), fly (CSS 3D), simplified fly (CSS 3D), reverse fly (CSS 3D), skew, helix (CSS 3D), fan, tilt, papercut, zipper, fade, twirl (CSS 3D),

How to use:

First you need to include the jQuery library, the plugin and the style:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/stroll.min.js"></script>

The HTML markup is the following:

<div id="main">
    <ul>
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
    </ul>
</div>

Don’t forget that the scroll effect is determined via the class that is set on the list. Then stroll.js needs to be told to monitor that list via the bind method:

stroll.bind( '#main ul' );

Demo

Download & Documentation

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s