jQuery Based Fullpage Page Slider with 3D CSS3 Transitions - wankyPages
File Size: | 47.9 KB |
---|---|
Views Total: | 3978 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

wankyPages is a jQuery plugin designed for one page website which allows you to slide through page sections with fancy 3D CSS3 transitions.
How to use it:
1. Load the jQuery wankyPages plugin and other required resources at the bottom of the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="modernizr.custom.js"></script> <script src="wankypages.jquery.js"></script>
2. Load the required stylesheet for page transitions.
<link rel="stylesheet" href="animations.css">
3. Create several content sections in your web page.
<div id="pages" class="wanky_pages"> <div class="wanky_page" data-pageid="1"> <h1>Page 1</h1> <a href="#2">Next</a> </div> <div class="wanky_page" data-pageid="2"> <h1>Page 2</h1> <a href="#3">Next</a> </div> <div class="wanky_page" data-pageid="3"> <h1>Page 3</h1> <a href="#1">Next</a> </div> </div>
4. The required CSS styles.
.wanky_pages { position: absolute; width: 100%; height: 100%; overflow: hidden; -webkit-perspective: 1200px; -moz-perspective: 1200px; perspective: 1200px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .wanky_page { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: hidden; overflow: auto; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .wanky_current_page { visibility: visible; } .wanky_page_top { z-index: 4; } // Page styles body { background-color: #000000 } .wanky_page { text-align: center; } .wanky_page h1 { color: #FFFFFF; font-size: 75px; } .wanky_pages a { color: #FFFFFF; font-size: 30px } .wanky_page[data-pageid="1"] { background-color: #0ac2d2 } .wanky_page[data-pageid="2"] { background-color: #fdc162 } .wanky_page[data-pageid="3"] { background-color: #fd6a62 }
5. Initialize the plugin to enable the page slider.
$('#pages').wankyPages({ selector_prefix : 'wanky_', default_page : '1', animation : 'glueTopBottom' });
6. Options and defaults.
selector_prefix: 'wanky_'
: Prefix to give all classes and ID'sdefault_page: 1
: Default/ first page to loadanimation: false
: Enable animationsleftInAnimation: 'pt-page-moveFromLeft'
: Class to apply to pages switching to moving leftleftOutAnimation: 'pt-page-moveToRight'
: Class to apply to pages switching from moving leftrightInAnimation: 'pt-page-moveFromRight'
: Class to apply to pages switching to moving rightrightOutAnimation: 'pt-page-moveToLeft'
: Class to apply to pages switching from moving rightonBeforeChange: function(next_page, current_page){},
: Function to call before page changesonAfterChange: function(){}
: Function to call after page changesonBeforeLoad: function(){}
: Function to call before plugin loadsonInterval: function(current_page){}
: Function to call on page checking interval
This awesome jQuery plugin is developed by pea. For more Advanced Usages, please check the demo page or visit the official website.