Slice Page Transition Effect With jQuery And CSS3 - slicescreen

slicescreen is a cool jQuery plugin that utilizes CSS3 3D transforms to create a customizable 3D slice animation when transitioning between sectioned content within the document.

How to use it:

1. Add content sections to your webpage.

<section id="p1">
  <div class="wrapper">
    <h1>Page 1</h1>
  </div>
</section>
<section id="p2" style="display: none;">
  <div class="wrapper">
    <h1>Page 2</h1>
  </div>
</section>
<section id="p3" style="display: none;">
  <div class="wrapper">
    <h1>Page 3</h1>
  </div>
</section>
<section id="p4" style="display: none;">
  <div class="wrapper">
    <h1>Page 4</h1>
  </div>
</section>

2. Add next/prev buttons to the webpage that allows the user to transition between pages manually.

<div id="ss-pager">
  <i id="next"></i>
  <i id="prev"></i>
</div>

3. Add jQuery library and the jQuery slicescreen plugin' script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="jquery.slicescreen.js"></script>

4. Initialize the plugin to create a default page slider with a slice transition effect.

var ss = new $.SliceScreen();

5. Active the next/prev buttons.

$('#next').click(function(event) {
  ss.next();
});

$('#prev').click(function(event) {
  ss.prev();
});

6. The default configuration options.

// the number of slices
slicesCountX: 6,
slicesCountY: 5,

// perspective
perspective: '2000px',

// rotate speed
speed: 500,

// duation type, defines the time of different slices starts to 
// rotate according to their x and y coodiates
duration: function(x, y) {
    return (x + y) * 150;
},

// the orientation of the slices, h for horizontal and v for vertical
orientation: 'v',

// the element selector of the pages
el: 'section',

// the hook functions
beforeTurn: function() {
    console.log("before turn");
},
afterTurn: function() {
    console.log("after turn");
}

---

This awesome jQuery plugin is developed by yuanshenee. For more Advanced Usages, please check the demo page or visit the official website.