Dynamic Drive DHTML Scripts- Fading scroller

NS6+ IE5+ Opera 7+

Fading scroller

Author: Dynamic Drive

Note: Updated Sept 28th, 04' for ability to fade from any color to any color.

Description: This is your regular message scroller, except in IE5+ and NS6+, the messages are gradually faded into view! Check out the technique used to accomplish the fading- dynamically altering the text's color. The scroller comes with the following two features:

Fade from any color to another for the scroller text, such as from black to white, white to black etc.
Links inside messages (if any) can also be set to either fade, or remain their original color.

Demo:

Directions

Step 1: Simply add the below code where you wish the scroller to appear in the <body>:

Select All
<script type="text/javascript"> /*********************************************** * Fading Scroller- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ var delay = 2000; //set delay between message change (in miliseconds) var maxsteps=30; // number of steps to take to change from start color to endcolor var stepdelay=40; // time in miliseconds of a single step //**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect var startcolor= new Array(255,255,255); // start color (red, green, blue) var endcolor=new Array(0,0,0); // end color (red, green, blue) var fcontent=new Array(); begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations fcontent[0]="<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>"; fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination."; fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.</a>"; closetag='</div>'; var fwidth='150px'; //set scroller width var fheight='150px'; //set scroller height var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes. ///No need to edit below this line///////////////// var ie4=document.all&&!document.getElementById; var DOM2=document.getElementById; var faderdelay=0; var index=0; /*Rafael Raposo edited function*/ //function to change content function changecontent(){ if (index>=fcontent.length) index=0 if (DOM2){ document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")" document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag if (fadelinks) linkcolorchange(1); colorfade(1, 15); } else if (ie4) document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag; index++ } // colorfade() partially by Marcio Galli for Netscape Communications. //////////// // Modified by Dynamicdrive.com function linkcolorchange(step){ var obj=document.getElementById("fscroller").getElementsByTagName("A"); if (obj.length>0){ for (i=0;i<obj.length;i++) obj[i].style.color=getstepcolor(step); } } /*Rafael Raposo edited function*/ var fadecounter; function colorfade(step) { if(step<=maxsteps) { document.getElementById("fscroller").style.color=getstepcolor(step); if (fadelinks) linkcolorchange(step); step++; fadecounter=setTimeout("colorfade("+step+")",stepdelay); }else{ clearTimeout(fadecounter); document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")"; setTimeout("changecontent()", delay); } } /*Rafael Raposo's new function*/ function getstepcolor(step) { var diff var newcolor=new Array(3); for(var i=0;i<3;i++) { diff = (startcolor[i]-endcolor[i]); if(diff > 0) { newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step); } else { newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step); } } return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")"); } if (ie4||DOM2) document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+'"></div>'); if (window.addEventListener) window.addEventListener("load", changecontent, false) else if (window.attachEvent) window.attachEvent("onload", changecontent) else if (document.getElementById) window.onload=changecontent </script>

Configuring the scroller

You can easily configure the width/height, font, and contents of the scroller. Just change the first few variables of the script to do so.

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