« »

Display news and announcements on your site. The text fades in and out, and can display active links for each item.

Label: Fading Marquee

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript">
// Created by: Mike Hudson :: http://www.afrozeus.com

function setupFadeLinks() {
  arrFadeLinks[0] = "http://www.javascriptbank.com/javascript/text-javascript.html";
  arrFadeTitles[0] = "Text JavaScript effects";
  arrFadeLinks[1] = "http://www.javascriptbank.com/javascript/image-javascript.html";
  arrFadeTitles[1] = "Image JavaScript effects";
  arrFadeLinks[2] = "http://www.javascriptbank.com/javascript/scroller-javascript.html";
  arrFadeTitles[2] = "Scroller JavaScript effects";
  arrFadeLinks[3] = "http://www.javascriptbank.com/javascript/game-javascript.html";
  arrFadeTitles[4] = "Game JavaScript effects";
}

// You can also play with these variables to control fade speed, fade color, and how fast the colors jump.

var m_FadeOut = 255;
var m_FadeIn=0;
var m_Fade = 0;
var m_FadeStep = 3;
var m_FadeWait = 1600;
var m_bFadeOut = true;

var m_iFadeInterval;

window.onload = Fadewl;

var arrFadeLinks;
var arrFadeTitles;
var arrFadeCursor = 0;
var arrFadeMax;

function Fadewl() {
  m_iFadeInterval = setInterval(fade_ontimer, 10);
  arrFadeLinks = new Array();
  arrFadeTitles = new Array();
  setupFadeLinks();
  arrFadeMax = arrFadeLinks.length-1;
  setFadeLink();
}

function setFadeLink() {
  var ilink = document.getElementById("fade_link");
  ilink.innerHTML = arrFadeTitles[arrFadeCursor];
  ilink.href = arrFadeLinks[arrFadeCursor];
}

function fade_ontimer() {
  if (m_bFadeOut) {
    m_Fade+=m_FadeStep;
    if (m_Fade>m_FadeOut) {
      arrFadeCursor++;
      if (arrFadeCursor>arrFadeMax)
        arrFadeCursor=0;
      setFadeLink();
      m_bFadeOut = false;
    }
  } else {
    m_Fade-=m_FadeStep;
    if (m_Fade<m_FadeIn) {
      clearInterval(m_iFadeInterval);
      setTimeout(Faderesume, m_FadeWait);
      m_bFadeOut=true;
    }
  }
  var ilink = document.getElementById("fade_link");
  if ((m_Fade<m_FadeOut)&&(m_Fade>m_FadeIn))
    ilink.style.color = "#" + ToHex(m_Fade);
}

function Faderesume() {
  m_iFadeInterval = setInterval(fade_ontimer, 10);
}

function ToHex(strValue) {
  try {
    var result= (parseInt(strValue).toString(16));

    while (result.length !=2)
            result= ("0" +result);
    result = result + result + result;
    return result.toUpperCase();
  }
  catch(e)
  {
  }
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div id="fade_base" style="width:250px;border:1px dotted black;padding:5px;height:60px;line-height:1.8em;">
Check out our new scripts:<br>
<strong><em><a id="fade_link"></a></em></strong>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->