Dynamic Drive- Dissolving text effect

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

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

Select All
<script type="text/javascript"> /* Dissolving text fader script - By Peter Gehrig (http://www.fabulant.com) Permission given to Dynamicdrive.com to feature script in it's archive. For full source code, installation instructions, and 1000's more DHTML scripts, visit http://dynamicdrive.com */ var message=new Array() var messagelink=new Array() var messagetarget=new Array() /////////////////////////////////////////////////////////////////////////////////////// // CONFIGURATION ZONE STARTS HERE ///////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////////// // the messages. Add as many as you like. message[0]="Welcome to fabulant, the new fun zone of DHTML and JavaScript." message[1]="Download free scripts written by the maddest programmers online." message[2]="Learn how to bring more excitement and surprise to your website." message[3]="Use our online tools to create great animations and visual effects." message[4]="And try to enjoy life. Thank you for visiting fabulant.com" // add a link for each message (enter "#" if you don't want a link, see sample below) messagelink[0]="http://www.dynamicdrive.com" messagelink[1]="http://www.cssdrive.com" messagelink[2]="http://www.javascriptkit.com" messagelink[3]="http://www.fabulant.com" messagelink[4]="h#" // add a target for each link messagetarget[0]="_blank" messagetarget[1]="_blank" messagetarget[2]="_blank" messagetarget[3]="_top" messagetarget[4]="_self" // fontsize, font and fontcolor var fntsize=28 var fntfamily="Verdana" var fntcolor="#0000FF" // alignment of text ("left", "right", "center") var textalign="left" // rollover color var rollovercolor="#AAAAAA" // fontweight ("bold" or "normal") var fntweight="bold" // fontstyle ("italic" or "normal") var fntstyle="normal" // background-color of messagebox var backgroundcolor="#FFFFFF" // width and the height of the messagebox (pixels) var messagewidth=728 var messageheight=180 // distance from text to border var messagepadding=10 // width of messagebox border var borderwidth=7 // color of border var bordercolor="#0000FF" // borderstyle ("solid" or "dotted") var borderstyle="solid" // speed of the transition effect. A lower value means faster var pause=50 // standstill-time of messages (seconds) var standstill=3 //////////////////////////////////////////////////////////////////////////////// // CONFIGURATION ENDS HERE ///////////////////////////////////////////////////// // DO NOT EDIT BELOW THIS LINE //////////////////////////////////////////////////////////////////////////////// var messages_top=borderwidth var messages_left=borderwidth var coverimage = new Array() coverimage[0]="texttranstrans1.png" coverimage[1]="texttranstrans2.png" coverimage[2]="texttranstrans3.png" coverimage[3]="texttranstrans4.png" coverimage[4]="texttranstrans5.png" coverimage[5]="texttranstrans6.png" coverimage[6]="texttranstrans7.png" coverimage[7]="texttranstrans8.png" coverimage[8]="texttranstrans9.png" var covimgpreload=new Array() var covimgpreload=new Array() for (i=0;i<=coverimage.length-1;i++) { covimgpreload[i]=new Image() covimgpreload[i].src=coverimage[i] } var i_messages=0 var i_loop=0 var thisurl=0 var timer var coverwidth var coverheight standstill=standstill*1000 function init() { document.getElementById('messagebox').style.top=0 document.getElementById('messagebox').style.left=0 document.getElementById('cover').style.top=messages_top document.getElementById('cover').style.left=messages_left messagebox.innerHTML=message[i_messages] cover.innerHTML="<a href='"+messagelink[i_messages]+"' target='"+messagetarget[i_messages]+"' onMouseOver='dorollover()' onMouseOut='undorollover()'><img src='"+coverimage[i_loop]+"' width="+(messagewidth-2*borderwidth)+" height="+(messageheight-2*borderwidth)+" border=0></a>" docover() } function docover() { if (i_loop<=coverimage.length-1) { cover.innerHTML="<a href='"+messagelink[i_messages]+"' target='"+messagetarget[i_messages]+"' onMouseOver='dorollover()' onMouseOut='undorollover()'><img src='"+coverimage[i_loop]+"' width="+(messagewidth-2*borderwidth)+" height="+(messageheight-2*borderwidth)+" border=0></a>" i_loop++ timer= setTimeout("docover()",pause) } else { clearTimeout(timer) i_loop-- timer= setTimeout("uncover()",standstill) } } function uncover() { if (i_loop>=0) { cover.innerHTML="<a href='"+messagelink[i_messages]+"' target='"+messagetarget[i_messages]+"' onMouseOver='dorollover()' onMouseOut='undorollover()'><img src='"+coverimage[i_loop]+"' width="+(messagewidth-2*borderwidth)+" height="+(messageheight-2*borderwidth)+" border=0></a>" i_loop-- timer= setTimeout("uncover()",pause) } else { clearTimeout(timer) i_loop=0 i_messages++ if (i_messages>=message.length) {i_messages=0} messagebox.innerHTML=message[i_messages] timer= setTimeout("docover()",(4*pause)) } } function dorollover() { messagebox.style.color=rollovercolor } function undorollover() { messagebox.style.color=fntcolor } document.write('<style>') document.write('.box {') document.write('font-family:'+fntfamily+';') document.write('font-size:'+fntsize+'pt;') document.write('color:'+fntcolor+';') document.write('font-style:'+fntstyle+';') document.write('font-weight:'+fntweight+';') document.write('border-width:'+borderwidth+'px;') document.write('border-style:'+borderstyle+';') document.write('border-color:'+bordercolor+';') document.write('background-color:'+backgroundcolor+';') document.write('width:'+messagewidth+'px;') document.write('height:'+messageheight+'px;') document.write('padding:'+messagepadding+'px;') document.write('text-align:'+textalign+';') document.write('}') document.write('</style>') document.write('<DIV ID="roof" style="position:relative;width:'+messagewidth+'px;height:'+messageheight+'px;">') if (document.all) { document.write('<span ID="messagebox" class="box" style="position:absolute;"></span>') } else { document.write('<span ID="messagebox" class="box" style="position:absolute;height:'+(messageheight-2*borderwidth-2*messagepadding)+'px;width:'+(messagewidth-2*borderwidth-2*messagepadding)+'px;"></span>') } document.write('<DIV ID="cover" style="position:absolute;width:'+(messagewidth-2*borderwidth)+'px;height:'+(messageheight-2*borderwidth)+'px;"></DIV>') document.write('</DIV>') window.onload=init </script>

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!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post