Slicebox – A fresh 3D image slider with graceful fallback

Slicebox – A fresh 3D image slider with graceful fallback:

View demo Download source
With the CSS3 3D transformations we can create some neat effects by transforming elements in three-dimensional space. Slicebox makes use of the 3D transforms properties and allows different kind of effects. The main idea is to create three-dimensional image slices that will rotate and reveal the next image as another side of the 3d object. In case the browser does not support 3D transformations, a simple slider will be used as fallback.
Please note that you can only see the cool 3d effect of Slicebox in a browser that supports those CSS3 properties (currently Chrome and Safari).
The images used in the demos are by Rick Harris. They are licensed under the Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0).

Usage

In order to use Slicebox, put your images in a container with the class “sb-slider”:

<div id="sb-slider" class="sb-slider">
<img src="images/1.jpg" title="Creative Lifesaver"/>
<img src="images/2.jpg" title="Honest Entertainer"/>
<img src="images/3.jpg" title="Brave Astronaut"/>
<img src="images/4.jpg" title="Affectionate Decision Maker"/>
<img src="images/5.jpg" title="Faithful Investor"/>
<img src="images/6.jpg" title="Groundbreaking Artist"/>
<img src="images/7.jpg" title="Selfless Philantropist"/>
</div>

Then you can call the plugin with

$('#sb-slider').slicebox();

Options

Slicebox comes with a set of options that you can adjust for various types of effects:

orientation   : 'v',
// (v)ertical or (h)orizontal.

perspective   : 1200,
// -webkit-perspective value.

slicesCount   : 1,
// needs to be an odd number between 1 and 15
// (if you want the limit higher, change the _validate function).

disperseFactor  : 0,
// each slice will move x pixels left / top (depending on orientation).
// The middle slice doesn't move.
// The middle slice's neighbors will move disperseFactor pixels.

colorHiddenSides : '#222',
// color of the hidden sides.

sequentialRotation : false,
// the animation will start from left to right.
// The left most slice will be the first one to rotate.

sequentialFactor : 0,
// if sequentialRotation is true this will
// be the interval between each rotation in ms.

speed3d    : 800,
// animation speed3d.

speed    : 600,
// fallback speed. You might want to set
// a different speed for the fallback animation...

fallbackEasing  : 'easeOutExpo',
// fallback easing.

slideshow   : false,
// if true the box will be rotating automatically.

slideshowTime  : 2000
// interval for the slideshow in ms.

Check out each example and you will see how to create different behaviors with the options.
Hope you find it useful, feedback is welcome!
View demo Download source

Share and Enjoy: