Перейти к статье с описанием и скачать CoverScroll

This is a CSS3 variant of the Apple's CoverFlow design pattern

Usage

1. HTML

   <div id="container"> <img src="img1.jpg" /> <img src="img2.jpg" /> <img src="img3.jpg" /> <img src="img4.jpg" /> </div>

2. JavaScript

   	$('#container').coverscroll();
   

   OR

   	$('#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

  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
  };
		     

Methods

1. next - moves to next item
   

   $('#container').coverscroll('next');
   					

2. prev - moves to previous item
   

   $('#container').coverscroll('prev');
   					

Example

  $('#container').coverscroll();
			

More complex example (shelf)

HTML

JavaScript

  $('#container').coverscroll({
  	items:'.item', 
  	minfactor:10, 
  	scalethreshold:5, 
  	staticbelowthreshold:true, 
  	distribution:1, 
  	bendamount:1.5, 
  	movecallback:getStatus
  });
			

05

the title 1

previous  next

Add Item