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

File Size: 55.8 KB
Views Total: 1825
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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>

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>
   <button onclick="fkpage.goToSlide(3);">Goto Page 4</button>
  <button onclick="shownewts();">Swtich Effects</button>

4. Call the plugin on document ready.

  fkpage = $('.myfkpage').FKPageTransitions();

5. Setup the plugin.


  // 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

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

  // callbacks

  onSliderLoad: function(index){

  onSlideBefore: function(obj,prev,index){
  onSlideAfter: function(obj,prev,index){
  onSlideNext: function(obj,prev,index){

  onSlidePrev: function(obj,prev,index){

  onSliderResize: function(index) {

Change log:


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