120+ Touch-enabled Page Transitions In JavaScript - pageSwitch

File Size: 18.1 KB
Views Total: 4558
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
120+ Touch-enabled Page Transitions In JavaScript - pageSwitch

pageSwitch.js is a JavaScript library that provides 120+ touch-enabled, pretty awesome transition effects when switching between pages on mobile or desktop.

Also provides a jQuery adapter that makes it easier to implement these page transition effects on jQuery based web apps.

See It In Action:

More features:

  • Supports mouse drag, mouse wheel and touch swipe events.
  • Supports both horizontal and vertical directions.
  • Also allows you to switch between pages with keyboard arrows.
  • Supports up to 121 combinations of transition effects.
  • Easing functions.
  • Auto play.
  • Cross browser and cross platform.

Transition Effects Included:

  1. fade
  2. scroll
  3. scroll3d
  4. scrollCover
  5. scrollCoverReverse
  6. scrollCoverIn
  7. scrollCoverOut
  8. scrollX
  9. scroll3dX
  10. scrollCoverX
  11. scrollCoverReverseX
  12. scrollCoverInX
  13. scrollCoverOutX
  14. scrollY
  15. scroll3dY
  16. scrollCoverY
  17. scrollCoverReverseY
  18. scrollCoverInY
  19. scrollCoverOutY
  20. slide
  21. slideCover
  22. slideCoverReverse
  23. slideCoverIn
  24. slideCoverOut
  25. slideX
  26. slideCoverX
  27. slideCoverReverseX
  28. slideCoverInX
  29. slideCoverOutX
  30. slideY
  31. slideCoverY
  32. slideCoverReverseY
  33. slideCoverInY
  34. slideCoverOutY
  35. flow
  36. flowCover
  37. flowCoverReverse
  38. flowCoverIn
  39. flowCoverOut
  40. flowX
  41. flowCoverX
  42. flowCoverReverseX
  43. flowCoverInX
  44. flowCoverOutX
  45. flowY
  46. flowCoverY
  47. flowCoverReverseY
  48. flowCoverInY
  49. flowCoverOutY
  50. slice
  51. sliceX
  52. sliceY
  53. zoom
  54. zoomCover
  55. zoomCoverReverse
  56. zoomCoverIn
  57. zoomCoverOut
  58. zoomX
  59. zoomCoverX
  60. zoomCoverReverseX
  61. zoomCoverInX
  62. zoomCoverOutX
  63. zoomY
  64. zoomCoverY
  65. zoomCoverReverseY
  66. zoomCoverInY
  67. zoomCoverOutY
  68. skew
  69. skewCover
  70. skewCoverReverse
  71. skewCoverIn
  72. skewCoverOut
  73. skewX
  74. skewCoverX
  75. skewCoverReverseX
  76. skewCoverInX
  77. skewCoverOutX
  78. skewY
  79. skewCoverY
  80. skewCoverReverseY
  81. skewCoverInY
  82. skewCoverOutY
  83. flip
  84. flip3d
  85. flipClock
  86. flipPaper
  87. flipCover
  88. flipCoverReverse
  89. flipCoverIn
  90. flipCoverOut
  91. flipX
  92. flip3dX
  93. flipClockX
  94. flipPaperX
  95. flipCoverX
  96. flipCoverReverseX
  97. flipCoverInX
  98. flipCoverOutX
  99. flipY
  100. flip3dY
  101. flipClockY
  102. flipPaperY
  103. flipCoverY
  104. flipCoverReverseY
  105. flipCoverInY
  106. flipCoverOutY
  107. bomb
  108. bombCover
  109. bombCoverReverse
  110. bombCoverIn
  111. bombCoverOut
  112. bombX
  113. bombCoverX
  114. bombCoverReverseX
  115. bombCoverInX
  116. bombCoverOutX
  117. bombY
  118. bombCoverY
  119. bombCoverReverseY
  120. bombCoverInY
  121. bombCoverOutY

How to use it:

1. Download the zip or install the package via NPM:

# NPM
$ npm install pageswitch --save

2. Load the JavaScript file pageSwitch.js from the src folder:

<script src="src/pageSwitch.js"></script>

3. Create a group of pages to switch between.

<div id="imgs">
  <div>
    <img src="1.jpg" />
  </div>
  <div>
    <img src="2.jpg" />
  </div>
  <div>
    <img src="3.jpg" />
  </div>
  ...
</div>

3. Attach the pageSwitch.js to the parent container and config the transition effects with the following settings.

var pw = new pageSwitch('images', {

    // duration of animation
    duration: 600,

    // 1 = vertical, 0 = horizontal
    direction: 1,

    // initial page
    start: 0,

    // infinite loop
    loop: false, 

    // easing function: linear ease ease-in ease-out ease-in-out bounce
    ease: 'ease',

    // transition effect
    transition: 'slide',

    // freeze the page when transitioning
    freeze: false,

    // enable mouse drag
    mouse: true, 

    // enable mouse wheel
    mousewheel: false,

    // enable keyboard arrows
    arrowkey: false,

    // enable autoplay
    autoplay: false,

    // autoplay interval
    interval: 5000
    
});

4. Implement the pageSwitch.js using jQuery/Zepto.

$.fn.extend({
  pageSwitch: function(cfg) {
    this[0].ps = new pageSwitch(this[0], cfg);
    return this;
  },
  ps: function() {
    return this[0].ps;
  }
});

// init
$('#imgs').pageSwitch({
  duration: 1000,
  transition: 'slide'
  // ...
});

// methods
$('#imgs')
  .ps()
  .next();

5. Available API methods to control the page transition effects with JavaScript.

pw.prev();
pw.next(); 
pw.slide(n);
pw.setEase();
pw.setTransition(); 
pw.freeze(true | false); 
pw.play();
pw.pause();
pw.prepend(DOM_NODE);
pw.append(DOM_NODE);
pw.insertBefore(DOM_NODE, index);
pw.insertAfter(DOM_NODE, index);
pw.remove(index); 
pw.isStatic(); 
pw.destroy();

6. Event handlers.

pw.on('before', function(){
  // do something
});

pw.on('after', function(){
  // do something
});

pw.on('update', function(){
  // do something
});

pw.on('dragStart', function(){
  // do something
});

pw.on('dragMove', function(){
  // do something
});

pw.on('dragEnd', function(){
  // do something
});

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