jQuery

【jQuery】ページトランジションの為のjqueryプラグインcubeTransition

November 19, 2017
cubeTransition

cubeTransition.jsはページトランジションjqueryプラグイン。Jquery、CSS 3D変換、CSSアニメーションを使用して作成されます。

Usage

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

Demo/Download