New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


IE5+ Opr7+

Dissolving text effect

Note: Modified by Dynamic Drive to run only in IE 5 (for sake of 100% compatibility).

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

Before anything else, you'll need to first copy and upload the below image into your webpage directory:

slidefader.gif

Step 1: Add the below to the <head> section of your page:

Select All

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

Select All

Step 3: Finally, insert the following codes into the <BODY> tag itself, like this:

<body style="width:100%;overflow-x:hidden;overflow-y:scroll" onLoad="if(document.all&&window.print)init()">

As mentioned, 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!