Full version: jsB@nk » Scrollers » Fading » Scroller with smooth fade-effect
URL: https://www.javascriptbank.com/scroller-with-smooth-fade-effect.html
Surprise your visitors with this unique fade-scroller. Configure text, textsize, textcolor, backgroundcolor, scrollersize, bordercolor, links and fade effects in less than 5 minutes.
Full version: jsB@nk » Scrollers » Fading » Scroller with smooth fade-effect
URL: https://www.javascriptbank.com/scroller-with-smooth-fade-effect.html
<SCRIPT>// Scroller with smooth fade-effect// Your messages. Add as many as you likevar text=new Array()text[0]="JavaScriptBank.com"text[1]="Bank of over 2000+ free JavaScripts"text[2]="Free JavaScripts, Tutorials, Example Codes, DHTML, CSS, Resources and more"// Add a link for each messagevar textlink=new Array()textlink[1]="JavaScriptBank.com"textlink[2]="JavaScriptBank.com"textlink[3]="JavaScriptBank.com"// Add a target for each link// Possible values are "_blank", "_self", "_top", "_parent"var texttarget=new Array()texttarget[0]="_blank"texttarget[1]="_blank"texttarget[2]="_blank"// fontvar textfont="Arial"// fontcolorsvar textfontcoloraa="#FFFFFF"var textfontcolorbb="#FFFF00"// fontcolors on mouseover (rollover)var textfontcolorrollover="#ff0000"// fontsizevar textfontsize=11// backgroundcolorvar textbgcolor="#000000"// Type "bold" for bold text and "normal" for normal textvar textweight="bold"// Type "italic" for italic text and ""normal" for normal textvar textitalic="normal"// width and height of the scroller-boxvar textwidth=300var textheight=30// color of the scroller-box bordervar textbordercolor="#888888"// width of the bordervar textborder=1// width of the transparent zonesvar translayerszone=120// Do not edit the values below this linevar textpause=0var textitalicA=""var textitalicB=""var textweightA="<b>"var textweightB="</b>"var textdecoration="none"var textalignonly="center"var textfontsizeHTML=3var i_text=0var textcontent=""var thisspan=""var content=""var contentbg=""var toggle=1var timervar scrollready=truevar tablewidthvar tableheightvar textfontcolortoggle=new Array()var toggle=1 var step=5; var contentvar padding=3var textcontentheightvar textcontentwidthvar translayerswidth=4var translayersmax=Math.floor(translayerszone/translayerswidth)var translayersleftpos=0var translayersopacity=100var translayersfactor=100/translayersmaxvar translayerswidthall=translayersmax*translayerswidthvar ie=document.all?1:0 var ns6=document.getElementById&&!document.all?1:0var ns4=document.layers?1:0var browserinfos=navigator.userAgent var opera=browserinfos.match(/Opera/) getcontent()function getcontent() {if (ie || ns6) {tablewidth=textwidth-2*textbordertableheight=textheight-2*textbordercontent="<table width="+tablewidth+" height="+tableheight+" cellpadding=3 cellspacing=0 border=0><tr valign=middle><td><nobr>"for (i=0;i<text.length;i++) {if (toggle==1) {textfontcolortoggle[i]=textfontcoloraa}else if (toggle==-1) {textfontcolortoggle[i]=textfontcolorbb}toggle*=-1content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolortoggle[i]+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolortoggle[i]+"\'\">"content+=text[i]content+="</a><font color="+textbgcolor+">----------</font>"}content+="</nobr></td></tr></table>"}else {tablewidth=textwidth-2*textbordertableheight=textheight-2*textbordercontentbg="<table width="+tablewidth+" height="+tableheight+"><tr><td><font color="+textbgcolor+">hi</font></td></tr></table>"content="<table height="+textheight+" cellpadding=0 cellspacing=0><tr valign=middle><td><nobr>"for (i=0;i<text.length;i++) {if (toggle==1) {textfontcolortoggle[i]=textfontcoloraa}else if (toggle==-1) {textfontcolortoggle[i]=textfontcolorbb}toggle*=-1content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolortoggle[i]+";font-style:"+textitalic+";\" >"content+=text[i]content+="</a><font color="+textbgcolor+">----------</font>"}content+="</nobr></td></tr></table>"}}if (ns4) {toggle=1document.write('<table cellpadding=0 cellspacing=0 border=0 height='+textheight+' width='+textwidth+'><tr><td>');document.write('<ilayer name="marker" bgcolor="'+textbordercolor+'" width='+textwidth+' height='+textheight+'></ilayer>');document.write('</td></tr></table>')document.write('<layer name="tickerbg" left='+textborder+' top='+textborder+' width='+(textwidth-4*textborder)+' height='+(textheight-2*textborder)+' bgcolor='+textbgcolor+' visibility=hide>'+contentbg+'</layer>')document.write('<layer left=-50000 name="ticker" onMouseOver="setscrollready(0)" onMouseOut="setscrollready(1)">loading</layer>');}if (ie || ns6) {document.write('<table cellpadding=0 cellspacing=0 border=0 height='+textheight+' width='+textwidth+'><tr><td>');document.write('<div id="marker" style="position:relative; width:'+textwidth+'; height:'+textheight+'" ></div>');document.write('</td></tr></table>')if (ns6) {var tablewidth=textwidth-2*textbordervar tableheight=textheight-2*textborder}else {var tablewidth=textwidthvar tableheight=textheight}document.write('<div ID="roof" style="position:absolute;width:'+tablewidth+'px;height:'+tableheight+'px;border-style:solid;border-width:'+textborder+'px;border-color:'+textbordercolor+';background-color:'+textbgcolor+';visibility:hidden;overflow:hidden" onMouseOver="setscrollready(0)" onMouseOut="setscrollready(1)">')document.write('<span ID="ticker" style="position:absolute;top:0px;left:0px;visibility:hidden">'+content+'</span>')if (ie && !opera) {for (i=0;i<=translayersmax;i++) {document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')translayersleftpos+=translayerswidthtranslayersopacity-=translayersfactor}translayersleftpos=tablewidth-translayersleftposfor (ii=0;ii<=translayersmax;ii++) {document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')translayersleftpos+=translayerswidthtranslayersopacity+=translayersfactor}}if (ns6 && !opera) {for (i=0;i<=translayersmax-1;i++) {document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';-moz-opacity:'+translayersopacity/100+';overflow:hidden"> </span>')translayersleftpos+=translayerswidthtranslayersopacity-=translayersfactorif (translayersopacity<0) {translayersopacity=0.001}}translayersleftpos=tablewidth-translayersleftpostranslayersopacity=0.001for (i=0;i<=translayersmax-1;i++) {document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+tableheight+'px;background-color:'+textbgcolor+';-moz-opacity:'+translayersopacity/100+';"> </span>')translayersleftpos+=translayerswidthtranslayersopacity+=translayersfactor}}document.write('</div>')if (ns6) {document.write('<span ID="tickersize" style="position:absolute;top:0px;left:-5000px;visibility:hidden">'+content+'</span>')}}function doscroll(){if (scrollready) {if(ns4){document.ticker.left+=-step;if (document.ticker.left<document.marker.pageX+1*textborder) {document.ticker.clip.left+=step;}document.ticker.clip.right+=step;if(document.ticker.left<-textcontentwidth+document.marker.pageX) {document.ticker.left=textwidth+document.marker.pageX-1*textborder;document.ticker.clip.left=0document.ticker.clip.right=0}}if (ie) {document.all.ticker.style.posLeft+=-stepif (document.all.ticker.style.posLeft<-textcontentwidth) {document.all.ticker.style.posLeft=textwidth}}if (ns6) {document.getElementById('ticker').style.left=parseInt(document.getElementById('ticker').style.left)-stepif (parseInt(document.getElementById('ticker').style.left)<-textcontentwidth) {document.getElementById('ticker').style.left=textwidth}}timer=setTimeout("doscroll()",50)}else {clearTimeout(timer)}}function DL_GetElementLeft(eElement) { var nLeftPos = eElement.offsetLeft; var eParElement = eElement.offsetParent; while (eParElement != null) { nLeftPos += eParElement.offsetLeft; eParElement = eParElement.offsetParent; } return nLeftPos; }function DL_GetElementTop(eElement) { var nTopPos = eElement.offsetTop; var eParElement = eElement.offsetParent; while (eParElement != null) { nTopPos += eParElement.offsetTop; eParElement = eParElement.offsetParent; } return nTopPos; }function initscroller(){if (ns4) {getcontent()var thisspan=eval("document.ticker")thisspan.document.clear()thisspan.document.write(content)thisspan.document.close()textcontentwidth=thisspan.clip.rightdocument.tickerbg.left=document.marker.pageX+1*textborderdocument.tickerbg.top=document.marker.pageY+1*textborderthisspan.left=document.marker.pageX-1*textborder+textwidththisspan.top=document.marker.pageYthisspan.clip.width=textcontentwidth;thisspan.clip.height=textheight;thisspan.clip.left=0thisspan.clip.right=0document.tickerbg.visibility="show";thisspan.visibility="show";}if (ie) {textcontentwidth=document.all.ticker.clientWidthdocument.all.roof.style.posLeft=DL_GetElementLeft(document.all.marker);document.all.roof.style.posTop=DL_GetElementTop(document.all.marker);document.all.ticker.style.posLeft=textwidthdocument.all.ticker.style.clip='rect(0px, '+textcontentwidth+'px, '+(textheight)+'px, 0px)';document.all.roof.style.visibility="visible";document.all.ticker.style.visibility="visible";}if (ns6) {textcontentwidth=document.getElementById('tickersize').offsetWidthdocument.getElementById('roof').style.left=DL_GetElementLeft(document.getElementById('marker'));document.getElementById('roof').style.top=DL_GetElementTop(document.getElementById('marker'));document.getElementById('ticker').style.left=textwidthdocument.getElementById('ticker').clip='rect(0px, '+textcontentwidth+'px, '+(textheight)+'px, 0px)';document.getElementById('roof').style.visibility="visible";document.getElementById('ticker').style.visibility="visible";}doscroll()}function setscrollready(whatanswer) {if (whatanswer==1) {scrollready=truecheckscroll()}else {scrollready=false}}function checkscroll() {clearTimeout(timer)if (scrollready) {doscroll()}}function reopenpage() {history.go(0)}window.onresize=reopenpagewindow.onload=initscroller</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->