CSS3 Scroll Effects

Time for some CSS tinkering again and ended up creating this set of CSS3 scrolling styles. The visuals are surprisingly impactful.
CSS3 Scrolling works by applying a future/past class to list items outside of the viewport as you scroll. Based on this class a variety of transforms are transitioned to via CSS.
Same kind of effect is used in Linkedin profiles friend connection.

Source : https://github.com/hakimel/stroll.js
DEMO : http://goo.gl/Qt3eQ

stroll.js – because it scrolls, and trolls.

A collection of CSS list scroll effects.

Curious about how this looks in action? Check out the demo page.

Usage

The style of scroll effect is determined via the class that is set on the list. Once the class is set, stroll.js needs to be told to monitor that list via the bind method:

// Bind via selectors
stroll.bind( '#main ul' );

// Bind via element reference
stroll.bind( document.getElementById( 'some-list' ) );

// Bind via array of elements / jQuery object
stroll.bind( $( '#main .some-list' ) );

You can provide an additional parameter with more options:

// Makes stroll.js monitor changes to the DOM (like adding or resizing items). 
// This is taxing on performance, so use scarcely. Defaults to false.
stroll.bind( '#main ul', { live: true } );

To disable the effect on an already-bound list, you can use stroll.unbind():

// Same target options as stroll.bind
stroll.unbind( selector/element/array );