Text Fade DHTML Marquee

Wow, our first recursive tip and by request no less.
Here’s source for the client testimonial effect on the the home page.

<script type="text/javascript">
var delay = 4000; //set delay between message change (in milliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in milliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in milliseconds 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="padding: 10px;">';
fcontent[0]="Thank you for all your help along the way. I have gotten amazingly good feedback from both the Open House (nearly 200 people came!) and your marketing material. Thank you once again for that excellent work! The website was so wonderful and I can't believe you and your team were able to create it so quickly. Totally fabulous!<br><br> Dr. Molly Force, Owner and Director Prosper Natural Health. Port Townsend, WA.";
fcontent[1]="David first began working for us as our IT specialist. However, since that time, we have used David and his team on a variety of projects including website construction and database development and management. David has always exceeded all expectations on every project.<br><br> John McQueen, Principal Anderson-McQueen Funeral and Cremation Centers. St. Petersburg, FL.";
fcontent[2]="David has been a godsend to our company. He is both knowledgeable and creative in the ways in which he addresses business problems. He also operates with the utmost of integrity in his dealings with clients. I highly recommend him!<br><br> Heather Ceresoli, Division Director Taylor White Consulting. St. Petersburg, FL.";
fcontent[3]="David\'s firm has provided exceptional service to our firm as we have grown through the years. We highly recommend his organization.<br><br> Jim Bassil, Partner Taylor White Consulting. St. Petersburg, FL."
fcontent[4]="Wow. I take off my hat. Thank you for your dedication in working around the clock to resolve the issue.<br><br> Shoji Masuzawa, Director of IT Center for Social and Emotional Education. NY, NY."
fcontent[5]="Steven, Thank you for being there this morning. It means a lot to me that you would take the extra time to be there to assist our vendors with the diagnosis of our server hardware issues.<br><br> Jay Smithweck, Owner Autoexact.com. Tampa, FL."
closetag='</div>';

var fwidth='200px'; //set scroller width
var fheight='240px'; //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>

Advertisement