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: 11 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>