UPDATED: JULY 20, 2016 – ARTICLE: FADING SCROLLER WITH FADE IN FADE OUT TEXT

Category: Web Design & Development

The fading scroller is a great way to have text on your site that fades in then fades out. The width and height can be customized to any width or height you may require.

Border width, color and background color can also be changed in the code, see how to change it below. If you would like to use the fading scroller copy the code above to your site. Its very easy to edit and hyper-links will also work in the content.

This is your regular fading 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 texts color.

It Comes With The Following Features:

• Fade from any color you would like.
• The fading scroller width and height can be changed.
• Change text font and size to any thing you want.
• Change the border width and color.
• The background color can be changed.
• Links inside messages can also be set to fade, or remain their original color.

Great way to catch your Visitors Attention

The fading scroller code is a nice way to catch your visitors attention with short snippets of content about a page and you can have a hyper-link so if they want to know more they can click the link.

Have as many short snippets of content you want fading in then fading out, the fading scroller will display them all one at a time. Your text will fade in then out and new text will fade in and so on.

Once done it will start from the beginning again. Its a nice way to have additional text on your page when you build a website.

How To Edit The Fading Scroller Script

Once you copy our fading scroller script above to your site the fading scroller will work but with our stuff on. Below is how you can customize the script:

Fading Scroller Code

<!-- Fading Scroller Code Start -->

<script type="text/javascript">
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 />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>Fade In Text</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>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>Click here</u></a>";
closetag='</div>';
var fwidth='160px'; //set scroller width
var fheight='250px'; //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 color 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>
<!-- Fading Scroller Code End  -->

You may also like this

Scrollers

Tags: fading scroller, fade in fade out text, fading scroller script
ARTICLE: FADING SCROLLER WITH FADE IN FADE OUT TEXT WAS FIRST PUBLISHED: DECEMBER 06, 2013