Image Transitions 2.0
Version 2.0 — 8th May 2011
Image Transitions 2.0
is a collection of stylish transition effects,
that can add a touch of class to any image swap!
Version 2.0 introduces a bunch of amazing new transform effects,
that can twist, scale and skew the image to all kinds of funky angles!
This version also adds new
synchronisation
capabilities, that make it trivial
to sequence transitions together, for slideshows and other automation.
A complete re-development of this widely-used and popular script,
Image Transitions 2.0 works in all modern browsers —
including full support
for IE6 and above.
What's new in Version 2.0
More Demos and Instant Code-Examples
Use the demo form below to select a transition and experiment with its options — you'll get an instant demo of the effect and sample code to recreate it: Please note: this demo requires a level of JavaScript support that your browser doesn't have; as a result, it probably won't work for you. Sorry!
Live code-example:
Get the script
Download the zipfile [328K], unpack it into your site directory and add the script to your page; it can go anywhere:
<script type="text/javascript" src="transitions.js"></script>
Once you have the script in place you'll be able to use its methods
(as detailed in the Image Transitions Manual).
Method-calls can come from anywhere on the page and don't have to wait for onload —
but they obviously must be after both the script itself
and the image(s) you're working with. The simplest, and arguably the best thing
to do, is to put all your scripting at the end of the <body> section.
The download archive contains two versions of the script — one for development, and one for production use:
"transitions.debug.js"-
This version of the script can be used during initial development — it has comprehensive error-handling and friendly debugging information, giving you details of any invalid data passed to any of the script's methods. This version is also extensively commented, for your interest and reference.
"transitions.js"-
This is the main production-version — to be used when deploying to a live site or application. This version is aggressively compressed to make it a much smaller download, and provides no error-handling or debugging information.
You can also download a customized script, that's optimized to only include the code you need to run the the transitions you want. As with the main production version, the customized scripts are heavily compressed for production-use, and don't provide debugging information: Please note: this form requires a level of JavaScript support that your browser doesn't have; as a result, it probably won't work for you. Sorry!
Image Transitions Manual
To begin with, you should check the basic guide, called Using the Script, which will show you how to use the transition methods, how to use the script to pre-load images, and edit its global configuration. There's also information to help you understand the script's debugging messages.
There's also a more advanced guide, Further Development, which focuses on how to synchronise transitions, such as triggering one from another to create interesting two-stage effects. It will also show you how to synchronise longer, more complex sequences, for things like slideshows, presentations and image-rotation scripts.
Browser support
The script provides two levels of browser support — those which support every transition, and those which support all except the transform-based transitions. But when a transform-based transition is run in a browser that doesn't support them, it will still do a basic image-swap as its fallback behavior (which is also what happens when images are disabled).
What's new in Version 2.0
Image Transitions 2.0 has been completely re-written
from the ground up, with many improvements,
enhancements and fixes, and a host of exciting new features
The most significant upgrade is the range of new transitions:
-
grow()is a transform-based scaling transition with 15 different effects. -
twist()is a transform-based rotation transition with 16 different effects. -
skew()is a transform-based geometric-distortion transition with 30 different effects. -
slide()is a position-based sliding or pushing transition with 13 different effects. -
bars()creates multiple clip-based bars, squares and checkerboard transitions with 21 different core effects and hundreds of permutations!
There are also some helpful new utility methods:
-
The
cache()method can pre-load any number of images. -
The
pictures()method can tell you whether images are enabled in the browser. -
The
define()method is used for configuring global behaviors.
And a whole bunch of other new features and updates:
- New asynchronous callback function for all transition methods, makes it easy to synchronise transitions for slideshows and other automation.
-
New
fade depth
argument for all transitions (except fade itself), makes it possible to add an opacity cross-fade to any transition, in addition to its main effect. The depth of the fade is configurable from zero to100%. -
New
reverse
argument for all transitions (except fade), which allows you to reverse the effect of any transition. For example, instead of wiping left-to-right and covering the original image with the new one, it would wipe right-to-left and reveal the new image underneath. -
New
"RND"value for the animation type, can be passed to any of the transitions (except fade) to specify a random effect. - Self-correcting clock produces super-accurate transition times, so that the duration you specify is dang-near exactly what you get. The typical timing-drift is only 0.2% (eg. a two-second transition would actually take 2.004s).
- Super-accurate positioning for superimposed images, avoids the rounding-errors that sometimes appeared in the previous version.
- Automatically detects when images are disabled in the browser, and adjusts its behavior to match that fallback condition.
- Detailed validation and error reporting for all method arguments, when using the debug version of the script.
- Universal syntax and data-typing, makes it easy to learn and easy to generate programatically.
![[php]](/images/php.png "Uses PHP")