Image transitions

Version 1.1 - 26th November 2004

These three scripts provide a range of cross-browser fade and wipe transitions, centered around an image change. They can be used to add a touch of class to regular image swaps, or possibly as components to more complex DHTML effects.

The demos below use javascript: links to illustrate the functionality of the scripts, but in practise you would address them from another script.

Latest update

Version 1.1 of swapfade and crossfade fixes a strange visual popping effect at the top of a fade transition in Firefox, by limiting the maximum opacity to 0.9999999. Many thanks to John Serris for telling me about that.

Swap-fade

This effect fades-out an image, swaps it, then fades-in a new one. You can also have it change the alt text, which happens at the start of the transition.

Fade effects are based on opacity, which is available in Mozilla browsers, Safari 1.2 and Win/IE5.5 SP1 or later. If opacity is not supported then the image does a normal swap. If scripting (or this script) is not supported the default image or alt text will be shown:

Accessible Website Menu

Cross-fade

This effect cross-fades one image into a new one. You can also have it change the alt text, which happens at the start of the transition.

Fade effects are based on opacity, which is available in Mozilla browsers, Safari 1.2 and Win/IE5.5 SP1 or later. If opacity is not supported then the image does a normal swap. If scripting (or this script) is not supported the default image or alt text will be shown:

Accessible Website Menu

Cross-wipe

This effect cross-wipes one image into a new one, with a choice of 11 different animations. You can also have it change the alt text, which happens at the start of the transition.

Wipe effects are based on clip, which works in all modern graphical browsers. It also uses dynamic element creation, and in browsers which support clip but not element creation (such as Opera 5 and 6) the image does a normal swap. If scripting (or this script) is not supported the default image or alt text will be shown:

Accessible Website Menu

Get the script

Download the zipfile [19K] and unzip it into your site directory. Then include the transitions.css style sheet plus whichever script(s) you want to use. They should go in the <head> section, for example: 

<!-- Image transitions by Brothercake - http://www.brothercake.com/ -->
<script type="text/javascript" src="crosswipe.js"></script>
<link rel="stylesheet" type="text/css" href="transitions.css" media="screen, projection" />

There's very little code in transitions.css, the same for every script, so you could just copy it into your main style sheet. If you want to use more than one effect you can include more than one script - they won't interfere with each other.

Once that's done you can call the effect you want:

Swap-fade

swapfade(document.getElementById('test'), 'buttons/udm4-whitebutton88x31.gif', '2', 'Accessible Website Menu [white]');

The swapfade function takes four arguments:

Image object
A reference to the image you want to change.
New SRC
A string that specifies the src of the new image (which must be the same size as the original).
Duration
A string that specifies the total length of the transition, an integer in seconds.
New ALT text
An optional string that specifies the alt text of the new image; if this is not included then the alt text will stay the same.

Cross-fade

crossfade(document.getElementById('test'), 'buttons/udm4-whitebutton88x31.gif', '2', 'Accessible Website Menu [white]')

The crossfade function also takes four arguments, exactly the same as swapfade:

Image object
A reference to the image you want to change.
New SRC
A string that specifies the src of the new image (which must be the same size as the original).
Duration
A string that specifies the total length of the transition, an integer in seconds.
New ALT text
An optional string that specifies the alt text of the new image; if this is not included then the alt text will stay the same.

Cross-wipe

crosswipe(document.getElementById('test'), 'buttons/udm4-greenbutton88x31.gif', '2', 'lr', 'Accessible Website Menu [green]')

The crosswipe function takes five arguments:

Image object
A reference to the image you want to change.
New SRC
A string that specifies the src of the new image (which must be the same size as the original).
Duration
A string that specifies the total length of the transition, an integer in seconds.
Direction
A string that specifies which animation to use, from the following choices: Left to Right ("lr"), Right to Left ("rl"), Top to Bottom ("tb"), Bottom to Top ("bt"), Top Left to Bottom Right ("tlbr"), Top Right to Bottom Left ("trbl"), Bottom Left to Top Right ("bltr"), Bottom Right to Top Left ("brtl"), Center to Vertical Edges ("cve"), Center to Horizontal Edges ("che"), or Center to Corners ("cc").
New ALT text
An optional string that specifies the alt text of the new image; if this is not included then the alt text will stay the same.

Preloading the images

It's a good idea to preload the images, and the scripts can do this for you - there's an array at the top of each script where you can list them. Here's an example from crossfade.js: 

ixf.imgs = [
    'buttons/udm4-whitebutton88x31.gif',
    'buttons/udm4-greenbutton88x31.gif',
    'buttons/udm4-purplebutton88x31.gif'
    ];

Remember that the object name - ixf in this case - is different for each script, so you can't copy the caching array from one script into another. The object names are different so that you can use more than one of the scripts without them interfering; but obviously if you are using multiple effects on the same images, you only need to preload them in one of the scripts. If you don't want to preload any images then just leave a blank array, such as ixf.imgs = [];

Browser notes

The duplicate elements used in the crossfade and crosswipe functions are vulnerable to a bug in Mac/IE5, whereby the returned co-ordinates of the original images are incorrect by an inverse of the page's body margins, so the duplicates might be positioned incorrectly. I haven't applied a fix for this, because it feels too much like a hack. The workaround here is to take control of the document margins yourself - setting them to zero, so the problem doesn't manifest: 

html, body 
{
    margin:0;
    padding:0
}

Get the script

lGPL License → Terms of use

Discuss this page

Comments? Suggestions? # Join the discussion!

Categories...

Usability widgets

For enhancing usability:

Website gadgets

Bits of site functionality:

Local network apps

Web-applications for your home or office network:

Images

Image manipulation scripts:

Components

Parts for other scripting:

Novelties

More amusing than useful:

In this area

Main areas

[brothercake] coming in to land