Full Page Transition Animations with jQuery and CSS3 - Page Transition

Page Transition is a super lightweight (~4kb unminified) jQuery plugin for implementing smooth CSS3 powered full page transition animations within your HTML document.

How to use it:

1. Load the animations.css file in the header for the CSS3 animations.

<link rel="stylesheet" href="animations.css">

2. Add multiple pages to the html document.

• data-to: the page ID you want to transition to.
• data-transition: animation type. Available values: horizontal, vertical, horizontal-easing, vertical-easing, horizontal-fade, and vertical-fade. Refer to animation.css for more animations.

<div id="page-1" class="page">
  <h1>Page One</h1>
  <button class="transition" 
          data-to="page-2" 
          data-transition="horizontal">
          NEXT PAGE
  </button>
</div>

<div id="page-2" class="page">
  <h1>Page Two</h1>
  <button class="transition" 
          data-to="page-3" 
          data-transition="horizontal-easing">
          NEXT PAGE
  </button>
</div>

<div id="page-3" class="page">
  <h1>Page Three</h1>
  <button class="transition" 
          data-to="page-1" 
          data-transition="horizontal-fade">
          NEXT PAGE
  </button>
</div>

3. Make the pages full window.

.page {
  height: 100%;
  overflow: hidden;
  position: absolute;
  visibility: hidden;
  width: 100%;
}

.current-page {
  visibility: visible;
  z-index: 1;
}

4. Include the latest jQuery library and the jQuery Page Transition plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="page-transitions.js"></script>

Change log:

2015-09-20

• JS update

---

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