Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Animated page transitions

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.

There are also callback functions for different parts of animation:
  • when animation starts
  • when webpage is about to change to other
  • when webpage changed to other
  • when animation ends

It is possible to provide which links can use which transitions in a similar as jQuery like selector way. And transition can be also called programmatically using classes API.

Package contains page_transition.js and page_transition.packed.js (packed javascript), transitions.js for predefined transition examples and two example files: test1.html and test2.html, which are switching to each other to demonstrate transitions.

Contents

Download

Example codes

Examples in action

Example scripts provided with package in action:

Video demonstration

Video demonstration:

Animation properties

Properties that can be animated to create transitions:

  • opacity (default value to use: 1)
  • top (default value to use: 0)
  • left (default value to use: 0)
  • width (default value to use: "auto")
  • height (default value to use: "auto")
  • scaleX (default value to use: 1)
  • scaleY (default value to use: 1)
  • skewX (default value to use: 0)
  • skewY (default value to use: 0)
  • rotate (default value to use: 0)

Method list

Constructor

Back to method list

Method namenew page_transition(selector, config);
DescriptionProvides defined transition style for links that match selector
Input parameters

string selector - selectof for document.querySelectorAll function (a jQuery like selector)

json config - Json structure with configuration properties

  • int steps - steps for each animation (default: 10)
  • int interval - time in miliseconds between each step of animation (default: 100)
  • function onAnimationStart - callback function, when animation starts (default: none)
  • function onPageUnload - callback function, when webpage is about to redirect to other webpage (default: none)
  • function onPageLoad - callback function, when new webpage is loaded and animation is about to resume to finish transition (default: none)
  • function onAnimationEnd - callback function, when animation/transitions is ended (default: none)
  • object transitionDefault - default animation values on normal page (default: {})
  • object transitionBegin - animation values changes from default to this values, before going to other page (default: {})
  • object transitionEnd - animation values changes from this values to default values, after loading new page (default: {})
Example input
var pt = new page_transition(selector, {
	transitionDefault: {
		rotate: 0,
		top: 0,
		left: 0
	},
	transitionBegin: {
		rotate: 360,
		top: -2000,
		left: 2000
	},
	transitionEnd: {
		rotate: 360,
		top: -2000,
		left: 2000
	}
});

Start animation programmatically

Back to method list

Method nameanimate(from, to, url)
DescriptionStart transition animation, usually it is done by clicking on a links provided as selector for page_transition object. But it is also possible to call animations programmatically.
Input parameters

object from - object with current animation values

object to - object with target animation values

string url - url where to redirect, after animation (optional)

Example input
var pt.animate(
	{
		rotate: 0,
		top: 0,
		left: 0
	},
	{
		rotate: 360,
		top: -2000,
		left: 2000
	},
	"./test2.html"
);

End animation

Back to method list

Method nameend()
DescriptionEnd transition animation after loading a page. Basically this should be called right after creating new page_transition (except when you have multiple transitions defined, you need to call end method for specific transition that occured)

Latest changes

None for now


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus