Image Transitions 2.0

Version 2.0 — 8th May 2011

Flag of Germany 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!

Flag of England

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.

  1. Using the Script
    1. Transition methods
    2. Utility methods
    3. Public properties
    4. 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.

  1. Further Development
    1. Defining the transition callback
    2. Synchronising multiple transitions

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).

These or later browser-versions support every transition:
  • Opera 10.5
  • Firefox 3.5 (or equivalent Gecko 1.9.1)
  • Safari 4 / Chrome 2 (or equivalent Webkit 531)
  • Internet Explorer 5.5
These browser-versions support all except the transforms:
  • Opera 9–10.1
  • Firefox 3.0 (or equivalent Gecko 1.9.0)

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  (thumb-up)

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 to 100%.
  • 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.

Using the Script

Get the script

BSD License → Terms of use

Image Transitions Manual

Translations

French translation (Translated by Anna Chekovsky)

Transitions d'images 2.0 est une collection élégante d'effets de transition, qui peut ajouter une touche de classe à tout échange d'image !

Customize the script

You can also download a customized script, that's optimized to only include the code you need to run the the transitions you want: 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!

Categories...

Website gadgets

Bits of site functionality:

Usability widgets

Images

Image manipulation scripts:

Local network apps

Web-applications for your home or office network:

Game and novelties

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.


In this area

Main areas


[brothercake] a round peg in a square hole, that still fits