File: transitions.js

Recommend this page to a friend!
  Classes of Arturs Sosins   Page Transitions   transitions.js   Download  
File: transitions.js
Role: Example script
Content type: text/plain
Description: 24 predefined transitions to use as example
Class: Page Transitions
Show transitions when the user leaves the page
Author: By
Last change:
Date: 11 years ago
Size: 7,902 bytes
 

Contents

Class file image Download
/************************************************************* * 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 } }); } }