This is a CSS3 variant of the Apple's CoverFlow design pattern
Usage
HTML
1 | <div id="container"> |
2 | <img src="img1.jpg" /> |
3 | <img src="img2.jpg" /> |
4 | <img src="img3.jpg" /> |
5 | <img src="img4.jpg" /> |
6 | </div> |
JavaScript
1 | $('#container').coverscroll(); |
OR
1 | $('#container').coverscroll({items:'img'}); |
Where value of "items" option is a jQuery selector for descendent elements of the container element (like in: $('#container').find('img');). This is only necessary in case when item elements are other than img element (for example if you want to use div-s as CoverScroll items).
Options
These are the default options:
var opt = {
'minfactor':20, // how much is the next item smaller than previous in pixels
'distribution':1.5, // how apart are the items (items become separated when this value is below 1)
'scalethreshold':0, // after how many items to start scaling
'staticbelowthreshold':false, // if true when number of items is below "scalethreshold" - don't animate
'titleclass':'itemTitle', // class name of the element containing the item title
'selectedclass':'selectedItem', // class name of the selected item
'scrollactive':true, // scroll functionality switch
'step':{ // compressed items on the side are steps
'limit':4, // how many steps should be shown on each side
'width':8, // how wide is the visible section of the step in pixels
'scale':true // scale down steps
},
'bendamount':2, // amount of "bending" of the CoverScroll (values 0.1 to 1 bend down, -0.1 to -1 bend up, 2 is straight (no bending), 1.5 sligtly bends down)
'movecallback':function(item){} // callback function triggered after click on an item - parameter is the item's jQuery object
};
Read more:http://slobodan.99k.org/plugins/coverscroll.html
