<!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 1</h1>
<div>
<div id='transitions'></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in feugiat lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris non ultricies neque. Vivamus lacinia lectus in nisi porta condimentum. Ut ut nunc quis tortor adipiscing faucibus vel vitae mauris. Aenean lacus neque, fringilla id venenatis id, consequat eget nunc. Mauris auctor orci vel ipsum varius mollis.</p>
<p>Phasellus ac nisl ac odio suscipit condimentum. Praesent ut leo eu diam condimentum consectetur in non leo. Aliquam eget leo orci, sed ultrices velit. Mauris eros sem, cursus non varius vitae, accumsan sit amet nisi. In et lacus mi. Donec ut urna lacus. Sed suscipit volutpat lorem a lobortis. </p>
<p>Pellentesque eros nunc, accumsan ac aliquam posuere, sagittis in nunc. In hac habitasse platea dictumst. Cras magna felis, aliquam non congue sed, aliquam non orci. Fusce vehicula lobortis sodales. Morbi a orci enim. Integer aliquam sagittis posuere. Pellentesque dictum lectus id diam blandit ac tincidunt tellus consequat. Pellentesque ac pharetra nulla. Cras placerat neque sit amet lectus porta eget pellentesque sapien consectetur. Vivamus commodo elit at elit ultricies non auctor ante porta. Donec in dapibus libero. Praesent rutrum est sed velit facilisis ornare. Curabitur aliquam nunc quis diam egestas ullamcorper. Integer tempor imperdiet est, sed pellentesque orci mollis sed. Donec gravida, sapien eget ornare mollis, orci felis placerat ipsum, a consectetur ante metus adipiscing sem. </p>
<p>Cras et justo sem, sit amet tristique ante. Nam scelerisque fringilla lacus, ut luctus nulla viverra ac. Quisque non dapibus elit. Nullam tincidunt nibh non purus dignissim viverra. Suspendisse venenatis augue et magna mattis a ultrices arcu semper. Duis sit amet tellus at sapien pharetra tempor ut eget orci. Aenean interdum accumsan sapien non vestibulum. Sed fermentum iaculis mauris tristique blandit. Maecenas dictum urna ac nunc pellentesque quis blandit lorem mattis. Sed nec lorem in purus fermentum varius. In hendrerit leo eget odio imperdiet sit amet egestas ante rutrum. </p>
<p>Quisque sem dolor, venenatis vel consectetur sed, fermentum ac risus. Donec id ipsum metus, id congue elit. Quisque vehicula volutpat elit sed egestas. Fusce eu luctus erat. Donec eu est ac libero auctor semper. Nunc rutrum faucibus ligula, a pharetra dui volutpat vel. Suspendisse non ligula orci. In ac quam at quam pharetra molestie. Praesent pharetra faucibus nisl, et blandit dui ullamcorper et. Nullam quis cursus quam. Nunc in erat a ipsum adipiscing luctus in non quam. Aenean laoreet molestie tempus. Morbi ac erat sit amet lectus blandit lobortis sit amet id lorem. Nulla tellus erat, accumsan ac consectetur eu, semper vitae lectus. Maecenas sagittis mollis eros quis gravida. Nam fringilla vestibulum sagittis.</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 = "./test2.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> |
Stumble It!
Bookmark in del.icio.us
Download
