File: transitions.js

/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Feel free to distribute and modify code, but keep reference to its creator
 *
 * Page transition class provides a way to define animated transitions between switching webpages. 
 * Definition of transition consists of defining 3 types of parameter values: 
 * for default page, for transitions start before going to other link and for transitions end, 
 * when new page was loaded. There are also 24 predefined transitions included in package 
 * for you to test it out and use as examples for creating your own transitions.
 *
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Animated-page-transitions
**************************************************************/

//get viewport dimensions
var viewport = function(){
	var viewport = new Object();
	viewport.width = 0;
	viewport.height = 0;
	// the more standards compliant browsers (mozilla/netscape/opera/IE7) 
	//use window.innerWidth and window.innerHeight
	if (typeof window.innerWidth != 'undefined')
	{
		viewport.width = window.innerWidth,
		viewport.height = window.innerHeight
	}
	else if (typeof document.documentElement != 'undefined'
	&& typeof document.documentElement.clientWidth !=
	'undefined' && document.documentElement.clientWidth != 0)
	{
		viewport.width = document.documentElement.clientWidth,
		viewport.height = document.documentElement.clientHeight
	}
	else
	{
		viewport.width = document.getElementsByTagName('body')[0].clientWidth,
		viewport.height = document.getElementsByTagName('body')[0].clientHeight
	}
	return viewport;
};

var vp = viewport();

var transition = {
	fade: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				opacity: 1
			},
			transitionBegin: {
				opacity: 0
			},
			transitionEnd: {
				opacity: 0
			}
		});
	},
	fromRight: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				left: 0
			},
			transitionBegin: {
				left: vp.width
			},
			transitionEnd: {
				left: vp.width
			}
		});
	},
	fromLeft: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				left: 0
			},
			transitionBegin: {
				left: -vp.width
			},
			transitionEnd: {
				left: -vp.width
			}
		});
	},
	fromTop: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				top: 0
			},
			transitionBegin: {
				top: -vp.height
			},
			transitionEnd: {
				top: -vp.height
			}
		});
	},
	fromBottom: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				top: 0
			},
			transitionBegin: {
				top: vp.height
			},
			transitionEnd: {
				top: vp.height
			}
		});
	},
	leftToRight: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				left: 0
			},
			transitionBegin: {
				left: -vp.width
			},
			transitionEnd: {
				left: vp.width
			}
		});
	},
	rightToLeft: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				left: 0
			},
			transitionBegin: {
				left: vp.width
			},
			transitionEnd: {
				left: -vp.width
			}
		});
	},
	topToBottom: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				top: 0
			},
			transitionBegin: {
				top: vp.height
			},
			transitionEnd: {
				top: -vp.height
			}
		});
	},
	bottomToTop: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				top: 0
			},
			transitionBegin: {
				top: -vp.height
			},
			transitionEnd: {
				top: vp.height
			}
		});
	},
	fromTopLeft: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				top: 0,
				left: 0
			},
			transitionBegin: {
				top: -vp.height,
				left: -vp.width
			},
			transitionEnd: {
				top: -vp.height,
				left: -vp.width
			}
		});
	},
	fromTopRight: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				top: 0,
				left: 0
			},
			transitionBegin: {
				top: -vp.height,
				left: vp.width
			},
			transitionEnd: {
				top: -vp.height,
				left: vp.width
			}
		});
	},
	fromBottomLeft: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				top: 0,
				left: 0
			},
			transitionBegin: {
				top: vp.height,
				left: -vp.width
			},
			transitionEnd: {
				top: vp.height,
				left: -vp.width
			}
		});
	},
	fromBottomRight: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				top: 0,
				left: 0
			},
			transitionBegin: {
				top: vp.height,
				left: vp.width
			},
			transitionEnd: {
				top: vp.height,
				left: vp.width
			}
		});
	},
	horizontalShrink: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				width: "auto",
				left: 0
			},
			transitionBegin: {
				width: 0,
				left: vp.width/2
			},
			transitionEnd: {
				width: 0,
				left: vp.width/2
			}
		});
	},
	verticalShrink: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				top: 0,
				height: "auto",
			},
			transitionBegin: {
				top: vp.height/2,
				height: 1
			},
			transitionEnd: {
				top: vp.height/2,
				height: 1
			}
		});
	},
	shrink: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				width: "auto",
				height: "auto",
				top: 0,
				left:0
			},
			transitionBegin: {
				top: vp.height/2,
				left: vp.width/2,
				height: 1,
				width: 1
			},
			transitionEnd: {
				top: vp.height/2,
				left: vp.width/2,
				height: 1,
				width: 1
			}
		});
	},
	verticalFlip: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				scaleY: 1
			},
			transitionBegin: {
				scaleY: 0
			},
			transitionEnd: {
				scaleY: 0
			}
		});
	},
	horizontalFlip: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				scaleX: 1
			},
			transitionBegin: {
				scaleX: 0
			},
			transitionEnd: {
				scaleX: 0
			}
		});
	},
	rotateRight: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				rotate: 0
			},
			transitionBegin: {
				rotate: 180
			},
			transitionEnd: {
				rotate: 180
			}
		});
	},
	rotateLeft: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				rotate: 0
			},
			transitionBegin: {
				rotate: -180
			},
			transitionEnd: {
				rotate: -180
			}
		});
	},
	fullRotate: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				rotate: 0
			},
			transitionBegin: {
				rotate: 360
			},
			transitionEnd: {
				rotate: 360
			}
		});
	},
	rotateAway: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				rotate: 0,
				top: 0,
				left: 0
			},
			transitionBegin: {
				rotate: 360,
				top: -vp.height,
				left: vp.width
			},
			transitionEnd: {
				rotate: 360,
				top: -vp.height,
				left: vp.width
			}
		});
	},
	skewX: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				skewX: 0
			},
			transitionBegin: {
				skewX: 90
			},
			transitionEnd: {
				skewX: 90
			}
		});
	},
	skewY: function(selector){
		return new page_transition(selector, {
			transitionDefault: {
				skewY: 0
			},
			transitionBegin: {
				skewY: 90
			},
			transitionEnd: {
				skewY: 90
			}
		});
	}
}