Web Page Slice Transition Effect with jQuery and CSS3

Web Page Slice Transition Effect

If you are looking for Web Page Slice Transition Effect with jQuery and CSS3 then you are at the right place. We are going to use the slice screen jQuery plugin to apply the 3D transforms to create slice animation to the image when it moves to the next image from the web page. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

How to use it

1. Create a simple markup to have a content section to the web page.
1.         <section id="image1">
2.                 <div class="wrapper">
3.                         <h1>Image 1</h1>
4.                 </div>
5.         </section>
6.         <section id="image2" style="display: none;">
7.                 <div class="wrapper">
8.                         <h1>Image 2</h1>
9.                 </div>
10.         </section>
11.         <section id="image3" style="display: none;">
12.                 <div class="wrapper">
13.                         <h1>Image 3</h1>
14.                 </div>
15.         </section>
16.         <section id="image4" style="display: none;">
17.                 <div class="wrapper">
18.                         <h1>Image 4</h1>
19.                 </div>
20.         </section>
21.         <section id="image5" style="display: none;">
22.                 <div class="wrapper">
23.                         <h1>Image 5</h1>
24.                 </div>
25.         </section>
26.         <section id="image6" style="display: none;">
27.                 <div class="wrapper">
28.                         <h1>Image 6</h1>
29.                 </div>
30.         </section>
31.         <section id="image7" style="display: none;">
32.                 <div class="wrapper">
33.                         <h1>Image 7</h1>
34.                 </div>
35.         </section>
36.         <section id="image8" style="display: none;">
37.                 <div class="wrapper">
38.                         <h1>Image 8</h1>
39.                 </div>
40.         </section>
41.  
42.         <div id="ss-pager">
43.                 <i id="next"></i>
44.                 <i id="prev"></i>
45.         </div>
2. Next, we are going to code the next and previous button to the web page that the user allows to next and previous manually.
1. <script type="text/javascript">
2.         var ss = new $.SliceScreenEffect();
3.         var index = 0;
4.         $('#next').click(function(event) {
5.                 console.log('navigate to page ', ++index + 1);
6.                 ss.next();
7.         });
8.         $('#prev').click(function(event) {
9.                 console.log('navigate to page ', --index + 1);
10.                 ss.prev();
11.         });
12. </script>
3. We are going to add a simple script to have a default page slider for the screen transition effect.
1.         var ss = new $.SliceScreenEffect();
4. This is the default settings.
1.      $.SliceScreenEffect = function(cfg) {
2.         this.config = {
3.  
4.             autoplay: true,
5.             slicesCountX: 9,
6.             slicesCountY: 3,
7.             perspective: '2000px',
8.             speed: 500,
9.             duration: function(x, y) {
10.                 return (x + y) * 150;
11.             },
12.             orientation: 'v',
13.             el: 'section',
14.             beforeTurn: function() {
15.                 console.log("before turn");
16.             },
17.             afterTurn: function() {
18.                 console.log("after turn");
19.             }
20.         };
21.         this.config = $.extend(true, this.config, cfg);
22.         this._init();
23.     }

Output

That's it, kindly click the "Download Code" button below for the full source code. Enjoy coding. If you are interested in programming, we have an example of programs that may help you even just in small ways. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.