FF2+ IE6+ Opr8+

Dissolving text effect

Author: Peter Gehrig

Note: Updated April 17th, 2010 for general improvements, cross browser support.

Description: This is a great DHTML script that rotates and displays any number of messages, with a unique dissolving effect applied during each rotation. The effect is archived by first positioning a semi transparent, "spotty" image behind the message, and performing a "wipe" action over it (see documentation inside script). As seen below, the result is nothing short of spectacular...

Note that this script requires that the text to be displayed be absolutely positioned on the page. In plain English, that means you'll need to specify exactly a left and top coordinate (relative to the page) when defining where the text should appear.

Demo:

 

 

 


Directions Developer's View

Step 1: Copy the following to the <body> section of your page.

Select All

Step 2: Save the 9 images (below). Put them all into the same folder as your HTML-file. Do not change their names:

 

since the script uses absolute positioning (as opposed to relative-absolute positioning). you need to manually set the coordinates of the animation. Check the documentation inside code of Step 1 to configure the required variables. Enjoy!