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.