Icontem

File: test2.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Page Transitions  >  test2.html  >  Download  
File: test2.html
Role: Example script
Content type: text/plain
Description: Example to demonstrate transitions
Class: Page Transitions
Show transitions when the user leaves the page
Author: By
Last change:
Date: 5 years ago
Size: 3,344 bytes
 

Contents

Class file image Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
/*************************************************************
 * 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
**************************************************************/
-->
<html>
<head>
<style>
#transitions
{
	width: 1000px;
	border: 2px solid black;
	padding: 3px;
	overflow: auto;
}
</style>
</head>
<body>
<h1>This is test page 2</h1>
<h3>This is completely different webpage (no AJAX)</h3>
<div>
<div id='transitions'></div>

<p>Some completely other text on completely other web page. No ajax used.</p>
<p><img src='http://webcodingeasy.com/user_uploads/glint.jpg'/></p>

</div>
<script src="./page_transition.packed.js" type="text/javascript"></script>
<script src="./transitions.js" type="text/javascript"></script>
<script>
	//create a link element
	function createLink(type){
		var a = document.createElement("a");
		a.className = type;
		a.href = "./test1.html#"+type;
		a.innerHTML = type;
		a.style.marginRight = "20px";
		a.style.marginTop = "5px";
		a.style.cssFloat = "left";
		a.style.display = "block";
		a.style.width = "100px";
		a.style.height = "20px";
		document.getElementById("transitions").appendChild(a);
	}
	
	//load transition
	function loadTransition(type){
		createLink(type)
		var pt = arr[type]("." + type);
		//if transitions was actve, 
		//finnish transition effect
		if(window.location.hash == "#"+type)
		{
			pt.end();
		}
	}
	//array with transitions
	var arr = {
		fade: transition.fade,
		leftToRight: transition.leftToRight,
		rightToLeft: transition.rightToLeft,
		topToBottom: transition.topToBottom,
		bottomToTop: transition.bottomToTop,
		fromLeft: transition.fromLeft,
		fromRight: transition.fromRight,
		fromTop: transition.fromTop,
		fromBottom: transition.fromBottom,
		fromTopLeft: transition.fromTopLeft,
		fromTopRight: transition.fromTopRight,
		fromBottomLeft: transition.fromBottomLeft,
		fromBottomRight: transition.fromBottomRight,
		horizontalShrink: transition.horizontalShrink,
		verticalShrink: transition.verticalShrink,
		shrink: transition.shrink,
		verticalFlip: transition.verticalFlip,
		horizontalFlip: transition.horizontalFlip,
		rotateRight: transition.rotateRight,
		rotateLeft: transition.rotateLeft,
		fullRotate: transition.fullRotate,
		rotateAway: transition.rotateAway,
		skewX: transition.skewX,
		skewY: transition.skewY
	};
	//loop through transitions
	for(var i in arr)
	{
		loadTransition(i);
	}
</script>
</body>
</html>