Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now →
With the CSS 3D Transforms 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 transforms, 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.
The images used in the demos are by ND Strupler. They are licensed under the Attribution 2.0 Generic (CC BY 2.0).
Tiny break: Want to get website inspiration? Check out our Webzibition and see whats trending.
Usage
In order to use Slicebox, put your images in an unordered list with the class “sb-slider”:
<ul id="sb-slider" class="sb-slider"> <li> <a href="#" target="_blank"> <img src="images/1.jpg" alt="image1"/> </a> <div class="sb-description"> <h3>Creative Lifesaver</h3> </div> </li> <li> <img src="images/2.jpg" alt="image2"/> <div class="sb-description"> <h3>...</h3> </div> </li> <li><!-- ... --></li> <!-- ... --> </ul>
You can use the div with the class “sb-description” to add any kind of description for the respective image. As shown in this example, you can also add an anchor around the image.
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:
$.Slicebox.defaults = { // (v)ertical, (h)orizontal or (r)andom orientation : 'v', // perspective value perspective : 1200, // number of slices / cuboids // needs to be an odd number 15 => number > 0 (if you want the limit higher, // change the _validate function). cuboidsCount : 5, // if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten) cuboidsRandom : false, // the range of possible number of cuboids if cuboidsRandom is true // it is strongly recommended that you do not set a very large number :) maxCuboidsCount : 5, // each cuboid will move x pixels left / top (depending on orientation). // The middle cuboid doesn't move. the middle cuboid's neighbors will // move disperseFactor pixels disperseFactor : 0, // color of the hidden sides colorHiddenSides : '#222', // the animation will start from left to right. The left most // cuboid will be the first one to rotate // this is the interval between each rotation in ms sequentialFactor : 150, // animation speed // this is the speed that takes "1" cuboid to rotate speed : 600, // transition easing easing : 'ease', // if true the slicebox will start the animation automatically autoplay : false, // time (ms) between each rotation, if autoplay is true interval: 3000, // the fallback will just fade out / fade in the items // this is the time fr the fade effect fallbackFadeSpeed : 300, // callbacks onBeforeChange : function( position ) { return false; }, onAfterChange : function( position ) { return false; } };
Check out each example and you will see how to create different behaviors with the options.
Hope you find it useful, feedback is welcome!