How To Make A Website Fading Scroller with Fade Text

HTML Marquee - Marquee Scrolling Text
‹‹ Fading Scroller

This is your regular Fade Text 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 fading scroller comes with the following features:
Fade from any color to another for the scroller text.
The fading scroller width and height can be changed.
The fading scroller text font and size can be changed.
The fading scroller border width and colour can be changed.
The fading scroller background colour can be changed.
Links inside messages can also be set to fade, or remain their original color.

DEMO:

Fading Banner Code

<noscript><a href="http://www.2createawebsites.com">
How To Create a Website</a></noscript> 
<script type="text/javascript">
/***********************************************
* Fading Scroller - (www.2createawebsites.com)
***********************************************/
var delay = 8000; //set delay between message change (in miliseconds)
var maxsteps=150; // 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]="<strong>Fading Scroller</strong><br><br>Get this fading scroller for your website its great. <br><br>Copy the fading scroller code to your site then edit the text to what you want, the text fades out then a new text appears. Its easy to add to your site try it!!";
fcontent[1]="<strong>Fading Scroller</strong><br><br>You can save space on your site by using our fading scroller, have as many fading messages as you want all in the fading scroller.<br><br>Change the text size and text fade colours, add a background colour and lots more...";
fcontent[2]="<strong>Fading Scroller</strong><br><br>Write some text about one of the pages on your site then put a link after the text so visitors reading the text can then click the link.<br><br><a href='http://www.2createawebsites.com/'><u>How To Create a Website</u></a>";
closetag='</div>';
var fwidth='160px'; //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;
/*Mike How To Create a Website*/
//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() lots more scripts from http://www.2createawebsites.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);
}
}
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);
}   
}
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)
                 /*Change the fading scroller border width and colour also the background colour below */
document.write('<div id="fscroller" style="border: solid 1px #B6BAC0; background: #F9F9FF; 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>

Make Money Online| Build a Website| Webmaster Tools| Site Analysis| Domain Name| Site Builder| Google Adsense| Yola Website Design
Create a Website| Website Design| Free Website| Yola| To Create a Website| SEO| HTML Tutorials| Affiliate Programs| Site Build it

© 2011 How To Create a Website - Web Design Tutorials

How To Make A Website Fading Scroller with Fade Text

HTML Marquee - Marquee Scrolling Text ‹‹ Fading Scroller

HTML Marquee - Marquee Scrolling Text
‹‹ Fading Scroller