pea / wankyPages

Fancy page transitions

Wanky Pages

Page switching management with 3D/2D CSS3 transition support.

Usage

1. Add animations.css

   <link rel="stylesheet" type="text/css" href="animations.css">

2. Add foundation styles for pages

   .wanky_pages {
       position: absolute;
       width: 100%;
       height: 100%;
       -webkit-perspective: 1200px;
       -moz-perspective: 1200px;
       perspective: 1200px;
       -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       transform-style: preserve-3d;
   }
   
   .wanky_page {
       -webkit-animation-duration: 2s;
       -moz-animation-duration: 2s;
       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;
   }

3. Add Page markup

   <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</h2>
           <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. Add Javascript dependencies

   <script src="jquery.js"></script>
   <script src="modernizr.custom.js"></script>
   <script src="wankypages.jquery.js"></script>

5. Load the plugin

   $(document).ready(function(){
   
       $('#pages').wankyPages({
   
           selector_prefix   : 'wanky_',                             // Prefix to give all classes and ID's
           default_page      : 1,                                    // Default/ first page to load
           
           animation         : 'moveUnfoldTopBottom',                // Animation to used. Change to false to use overrides
           
           leftInAnimation   : 'pt-page-moveFromLeft',               // Override left-in animation
           leftOutAnimation  : 'pt-page-moveToRight',                // Override left-out animatino
           
           rightInAnimation  : 'pt-page-moveFromRight',              // Override right-in animation
           rightOutAnimation : 'pt-page-moveToLeft',                 // Override right-out animation
           
           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
   
       });
   
   });

Supported Animations

• moveLeftRight
• foldLeftRight
• pushLeftRight
• foldTopBottom
• moveToLeftRightEasing
• scaleDown
• glueLeftRight
• glueTopBottom
• cubeLeftRight