jQuery Based Fullpage Page Slider with 3D CSS3 Transitions - wankyPages

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's
• default_page: 1: Default/ first page to load
• animation: false: Enable animations
• leftInAnimation: 'pt-page-moveFromLeft': Class to apply to pages switching to moving left
• leftOutAnimation: 'pt-page-moveToRight': Class to apply to pages switching from moving left
• rightInAnimation: 'pt-page-moveFromRight': Class to apply to pages switching to moving right
• rightOutAnimation: 'pt-page-moveToLeft': Class to apply to pages switching from moving right
• onBeforeChange: function(next_page, current_page){},: Function to call before page changes
• onAfterChange: function(){}: Function to call after page changes
• onBeforeLoad: function(){}: Function to call before plugin loads
• onInterval: 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.