In Development by 178 Comments

Slicebox – A fresh 3D image slider with graceful fallback

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.
Advertisement


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

Previous:
Next:

Tagged with:

Written by

Pedro Botelho is a freelance web developer & designer. He is the co-founder of Codrops and a team member at Tympanus.

View all articles by

Website: http://tympanus.net

Related Articles

Stay connected with us:

Grab the RSS Feed Get email updates Follow us on Twitter Join us on Facebook Add us on Google+
Advertisement

Feedback 178 Comments are closed.

  2. 2

    This is awesome!

    Can anyone tell me how to put in a work around for IE9, nothing shows up at all…

    How can I get just the basic 2D slider show up?

    thank you

  4. 4

    very nice, job, but , i find to change the size , to the slideshow , what’s parameter i’m do modify ?

  5. 5

    @allison we have the same problem.. it works only with a page refresh.. :S there isa another solution ?

  9. 9

    No matter what I try it doesn’t work on Explorer on PC, tried all the suggestions in these comments. Such a shame it’s awesome.

  12. 12

    It work pretty good in the demo and i like it. When i download it on my lap, the slicebox do not work only on chrome :(

  14. 14

    I have a problem: I must add a margin-top in the css, but the height depend of the number of photos to show… can’t fix it with multiple galeries :s

  15. 15

    Fixed it! It was a problem of line ending automatically converted with a by my text editor :X

    Thank you for this nice feature :)

  17. 17

    works great, i love it!! just cant see it on IE, like everyone else ive been pulling my hair out looking for a fix lol

    Great work tho! :)

  19. 19

    in which file do i need to change the options so that the slider will work automatocly?

Comments are closed.