Cycling Banner

Transitions

When I decide to write a new script, one of the first things I do is to have a look to see what other scripts that people have written that do something similar. Sometimes I find scripts that use a different approach to that I was thinking of using that helps me to improve on what I was originally planning on writing. Usually I see things with the scripts that I find that can be improved on (at least that's my opinion).

When it actually comes to writing my own version of the script, I write all of the code myself without referring at all to the scripts that I have found. Often I start by building as much of the functionality as I can using functions that I have already written and then add what is needed to achieve the desired result. My script can be considered to be either an improved version or an alternate version of whatever similar scripts that are available elsewhere and any similarity in the code is due entirely to the requirements of the script itself.

There are times when I find a script that achieves a given effect in such a simple way that there is no way that I could improve on the script and where the only way of producing a script that comes even close would require that I use almost identical code to that of the script that I have found. There isn't much point in my writing my own script in that case since at best it will only work as well as the other script I have already found and to get it to work that well my code would be so similar to that of the other script that it would look as if I had copied the other script. Rather than spend time writing a script that would be just about identical to someone else's script I would rather tell you where to get their script from. Reinventing the wheel serves no purpose unless you can create a better or at least different product from the original.

My cycling banner script substitutes one image for another in the same spot on the web page at regular time intervals. The script just does a straight substitution of one image for another, waits for a specified time and then repeats the process. When someone showed me a similar script on another web site where there was a transition effect applied so that one image transformed into the next rather than using a straight swap I decided to take a look to see how that effect was achieved. With the particular instance that I was shown the script used Jscript filter effects to achieve the transition which meant that the images would transform only in Internet Explorer and would still only do a straight swap in other browsers. In fact I spotted an error in the way that the script was coded where the wrong test was used to see if the filter effect was supported which would result in the script not working properly at all in Opera. Obviously I could improve on the script by producing a version that tested properly for if the transition filter effect was supported in order to fix the error.

Then it occurred to me that a still better solution would be to find a way to get a transition effect to work on all the current browsers rather than just Internet Explorer. It was while I was looking to see if anyone had worked out a way of applying transitions between images that would work in browsers other than Internet Explorer that I came across Brothercake's transition effects function library. Javascript expert James Edwards (better known in Javascript circles as brothercake) has put together a set of Javascript functions that can produce swap-fade, cross-fade, and cross wipe transition effects between two images by laying one image over the top of the other and changing the opacity of the images so as to produce the desired transition effects. These transitions will work on any browser that supports opacity and are so well written (as I would expect from Brothercake) that there is no point in trying to write your own equivalent to these scripts. The only bug that I can find in the script is that if your page is just big enough to completely fill the browser then as the new image is added a scrollbar will quickly appear and disappear causing the page to jump slightly. This does not occur if the page is small enough that adding an extra image to the bottom of the page doesn't need a scrollbar of if the page is big enough that the scrollbar is there all the time. There is no real way of fixing that problem either but since it only occurs if the page is almost exactly the same size as the browser window and only causes a flicker it isn't a major issue.

Brothercake supplies complete instructions for the use of all three transition image scripts on his page along with several working examples and a zip file that you can download that contains all three scripts. There isn't much I can add therefore as to how the scripts work or how to get and install them. It is suggested that the scripts are best used for when you want to transition between just two images and that the script is not necessarily suitable for slideshows where you have a series of images to display one after the other. This is not completely correct since it is possible to set up any of the transition image effects so that they will work to give a transition between each of the images in a slideshow provided that you separate the transition effect code from the slideshow code sufficiently and make sure that the display time for the images in between the transitions is sufficient to ensure that one transition is completed well before you try to start the next. Just to show what can be achieved by combining the cross-fade script into a slideshow here is what my example slideshow script looks like when it calls Brothercake's cross-fade transition to swap between images (it would of course look a lot better if the images were completely different rather than just having different numbers in them as then the effect that you can see with the numbers would occur across the entire image).