Full Page Transition Animations with jQuery and CSS3 - Page Transition
File Size: | 37.9 KB |
---|---|
Views Total: | 18454 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.