cubeTransition.js

a page transition effect jquery plugin. Created using Jquery, CSS 3D transforms and CSS Animations.

Idea comes from pageTransition, and I fix some bug of it, making the effect more smooth.

Demo

Demo page

Another demo with animation after switching pages

Well, in this demo, I copied some style sheets from deinterfaz's pageTransitions. Easiest way is clone this project and modify index.html for your use.

Usage

1 create some lines in a DIV with a ID name cubeTransition

<div id="cubeTransition">
<div><h2>cubeTransition.js</h2></div>
<div><h2>Elegant,</h2></div>
<div><h2>exected!</h2></div>
<div><h2>Simple.</h2></div>
</div>

2 include cubeTransition.js and jquery.js,jquery.touchSwipe,wheel-indicator.js. if you dont need mouse wheel or mobile swipe for your effect, you can delete the EventLinstener in cubeTransition.js.

the regular way, you can use your mouse wheel, keyborad (arrow key) and mobile swipe to control the page.

<script src='js/jquery.min.js'></script>
<script src='js/wheel-indicator.js'></script>	 
<script src="js/jquery.touchSwipe.js"></script>  
<script src="js/cubeTransition.js"></script>

3 done, and remember to write CSS style for your element.

if you don't need some control method, delete EventLinstener in cubeTransition.js.

 //for scroll by mouse or MAC track pad
      var indicator = new WheelIndicator({
      callback: function(e){   
          if (e.direction == 'down') {
            trans('down')
          } else {
            trans('up')
          }
      }
    });
    indicator.getOption('preventMouse'); // true
//update this instead of mousewheel.js
//in issuses#2 a friend want to use this plugin on MAC track pad

//arrow key
$(document).keydown(function(e) {
			if (e.keyCode == 38 || e && e.keyCode == 37) {
				trans('up')
			}
			if (e.keyCode == 39 || e && e.keyCode == 40) {
				trans('down')
			}

		});
//arrow key

//mobile swipe
$(document).swipe({
			swipe: function(event, direction, distance, duration, fingerCount) {
				if (direction == "up") {
					trans('down')
				} else if (direction == "down") {
					trans('up')
				}
			}
		});
//mobile swipe
		

Other

Feel free to contact me. Thanks.