Fade In Text Fade Out Text

Fade In Text. This is your regular Fade Text Scroller, except in IE5+ and NS6+, the messages are gradually faded into view!

Fade In Text Scroller

The text scroller has been made to be horizontal, you could use the horizontal text fade in fade out text scroller as a top banner for your website. You can set the text scroller width, height, text size, border width and background colour to make it the way you want it. Whats great is that you can have text that fades out followed by a different text that fades in then out etc. you can also have links so if a visitor wanted to know more you could have a link for them to click on. You can have as many text messages fading in and out as you want. This will save space on your site and catch your visitors attention as messages fade in and out. Its easy to edit, try it.

Fade In Text DEMO:

Fade In Text Code

<p style="display:none;">
<a href="http://www.2createawebsites.com/">To Create a Website</a></p> 
<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>Fade In Text</strong><br /><br />Use the horizontal fading text as a top banner, copy the fade in text to your site. Edit the text and let your visitors know what your site is about with a short message.";
fcontent[1]="<strong>Fade In Text</strong><br /><br />You can save space on your site by using our fade text scroller, have as many fading messages as you want all in the fading text scroller.<br /><br />Change the text size and text fade colours, add a background colour and lots more...";
fcontent[2]="<strong>Fade In Text</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='600px'; //set scroller width
var fheight='110px'; //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>

Tags: Fade In Text Text Scroller

STOP! READ THIS! Want to make a website and don't know where to start click here