<!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>
|
Download
