Smooth Single Page Transition Effects Using jQuery And CSS3 - page.js

page.js is a jQuery plugin used to implement the smooth CSS3 based page transition effects on your one page website and single page web application. The plugin enables you to switch between pages with slide or flip animations using CSS3 transitions, transforms and perspectives.

How to use it:

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. Add unique IDs to your page slides using data-jquery-page-name attribute as follows:

<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 navigation buttons to transition between these page slides. You're allowed to specify the animation types and directions using data-page-trans attribute like this:

<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 the plugin.

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

5. Active the navigation buttons.

$(".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 your website.

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

7. Shake the current page slide.

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

Changelog:

2020-01-10

• v1.1.4

2018-07-13

• fix handler management once again

2018-07-12

• avoid being triggered by bubbling 'transitionend' events

---

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