Transition in the Page Change

page.js is a jQuery plugin which is used to implement the smooth and eye-catching CSS3 based page transition effects on our one-page websites and single page web-applications. This plugin enables us to switch between the pages with the slide or flip animations using CSS3 transitions and transforms.

How to use this Plugin:

1. Load jQuery library and the jQuery page.js plugin's JavaScript & CSS files in the document.

<script src="jquery.min.js"></script>
<link href="jquery.page.css" rel="stylesheet">
<script src="jquery.page.js"></script>

2. Then add the unique ID's to our page slides using the data-jquery-page-name attribute as:  

<div class="page" data-jquery-page-name="1"></div>
<div class="page" data-jquery-page-name="2"></div>
<div class="page" data-jquery-page-name="3"></div> 

3. Create the navigation buttons to add the transition between these page slides. We are allowed to specify the animation types and directions using data-page-trans attribute like:

<div class="navigate" data-page-name="1" data-page-trans="slide-in-from-right">slide-in-from-right</div>
<div class="navigate" data-page-name="2" data-page-trans="slide-in-from-bottom">slide-in-from-bottom</div>
<div class="navigate" data-page-name="1" data-page-trans="slide-in-from-left">slide-in-from-left</div>
<div class="navigate" data-page-name="2" data-page-trans="slide-in-from-top">slide-in-from-top</div>
<div class="navigate" data-page-name="1" data-page-trans="flip-towards-right">flip-towards-right</div>
<div class="navigate" data-page-name="2" data-page-trans="flip-towards-left">flip-towards-left</div> 

4. Call the function on the top container to initialize this Plugin.  

$(".wrapper").page(); 

5. We have to Active the navigation buttons to see the Effect. 

$(".wrapper .page .navigate").click(function (ev) {
  var page  = $(ev.target).attr("data-page-name");
  var trans = $(ev.target).attr("data-page-trans");
  if ($(".wrapper").page().fetch(page) === null)
      $(".wrapper").page().shake();
  else
      $(".wrapper").page().transition(page, trans);
});

6. Remove a specified page slide from the website.  

$(".wrapper").page().remove(id); 

7. Lets Shake the current page slide.   

$(".wrapper").page().shake();