Cross-Platform Full Page Transitions with jQuery and CSS3 - FKPageTransitions

FKPageTransitions is a jQuery plugin which allows the visitor to navigator through your fullpage website with cool CSS3 powered transition effects.

Key Features:

• Responsive and cross-platform.
• Supports any Html elements embedded into the presentation.
• 37+ transition effects including flipping, fade in/out, scrolling, etc.
• Supports finger gestures on mobile devices and mouse wheel events on desktop.

Basic usage:

1. Include the jQuery FKPageTransitions plugin after loading jQuery JavaScript library.

<!-- jQuery library -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- FKPageTransitions Javascript file -->
<script src="fkpagetransitions.min.js"></script>
<!-- FKPageTransitions CSS file -->
<link href="fkpagetransitions.min.css" rel="stylesheet">

2. Create a list of elements for your full window webpage.

<ul class="myfkpage">
  <li>Page One</li>
  <li>Page Two</li>
  <li>Page Three</li>
  <li>Page Four</li>
  <li>Page Five</li>
  <li>Page Six</li>
</ul>

3. Create controls to navigate between these elements manually.

<div style="position: absolute; bottom: 0; left: 0; text-align: center; width: 100%;">
  <button onclick="fkpage.goToPrevSlide();">Prev</button>
  <button onclick="alert(fkpage.getCurrentSlide());">Curren Slide</button>
  <button onclick="alert(fkpage.getSlideCount());">Totle</button>
  <button onclick="fkpage.goToNextSlide();">Next</button>
  <br/>
   <button onclick="fkpage.goToSlide(3);">Goto Page 4</button>
  <button onclick="shownewts();">Swtich Effects</button>
  <br/>
</div>

4. Call the plugin on document ready.

$(document).ready(function(){
  fkpage = $('.myfkpage').FKPageTransitions();
});

5. Setup the plugin.

$('.myfkpage').FKPageTransitions({

  // general settings

  // transition type
  mode: 25, 

  // CSS for slide
  slideSelector: '',

  // enable infinite loop
  infiniteLoop: true,

  // transition speed
  speed: 5000,

  // easing options
  easing: null,

  // initial z-index
  slideZIndex: 50, 

  // bind window resize events
  responsive: true,

  // CSS class for page wrapper
  wrapperClass: 'fk-page-wrapper', 

  // mouse events
  mouseWheel:true, 
  wheelThreshold:2, 

  // touch events
  swipeThreshold: 50, 
  preventDefaultSwipeX: true, 
  preventDefaultSwipeY: false, 

  // callbacks

  onSliderLoad: function(index){
    alert();
  },

  onSlideBefore: function(obj,prev,index){
    console.log(obj);
    alert();
  },
 
  onSlideAfter: function(obj,prev,index){
    console.log(obj);
    alert();
  },
 
  onSlideNext: function(obj,prev,index){
    console.log(obj);
    alert();
  },

  onSlidePrev: function(obj,prev,index){
    console.log(obj);
    alert();
  },

  onSliderResize: function(index) {
    //slider.settings.onSliderResize.call(el, slider.active.index);
    console.log();
  }
  
});

Change log:

2015-04-08

• update

---

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