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!
does not work with the latest update of Mozilla
I confirm what Santiago V. said: with FireFox 10.0 (on Mac OS X 10.6.8) the plugin only displays a black box and no arrows on both sides.
For some reason Slicebox will not work for me in chrome. I have cleared my cache and it is the newest version. It works fine in safari but it is driving me crazy that I can’t get it to work in chrome.
I should add it is Chrome 16.0.912.77
Hi, like Santiago V. and Vincenzo, I confirm that on FF 10.0 (Windows) there is only a black box! I don’t see Javascript errors on Firebug consolle, it seem to be something related to some CSS selector.
Yeap Js is full of webkit-only properties.
You need to duplicate them with moz prefix so 3d will work with FF10.
New version of modernizr (2.5.1) fixes a problem with 3D in Firefox 10. But 3D transforms looks crappy.
Well, I added -moz-transform and I left out ‘-moz-perspective’ : options.perspective in Line 170, so it looks nice. But after two slides, it circles around in de opposite direction :(
beautiful, are we getting a new version to get it work on moz 10?
can anyone explain how to solve the problem woth firefox 10?
@Christophe told that line 170 need a modification, but it wasnt very specific.
need help! =)
Chrome on Windows XP also not working.
no solution to get it work with FF10?
Also hunting a fix for Moz 10 – unsure if this is a SliceBox or a Modernizr issue?
FF10.0 doesn’t render the slideshow. I’ve upgraded Modernizr to 2.5.2 and now
the latest Chrome seems to work (17.0.963.46). Not sure which change fixed the problem :(
PLS FIX IT!! :(
FF10 and IE 9
Your gallery doesn’t seem to like Firefox very well. Not sure if its just me or what but i tried it in chrome and safari and it works flawlessly. Thanks a bunch!
NM just realized i was a little late. Didn’t see the other posts