Free JavaScript scroller with smooth fade-effect

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Free JavaScript scroller with smooth fade-effect
Surprise your visitors with this free smoothfade JavaScript scroller. Configure text, textsize, scrollersize, links and fade effects in less than 5 minutes. Crossbrowser: Internet Explorer 5x/6x/7x/8x/9x, Firefox 2x/3x/4x, Opera 7x/8x/9x/10x/11x and Google Chrome 4x/5x/6x/7x/8x/9x.

Configuration:

Step 1: Open your webpage. Paste the following code anywhere into the body-section of your webpage:

<script>
// CREDITS:
// Right-To-Left Scroller with smooth fade-effect
// By Peter Gehrig
// Copyright (c) 2011 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT:
// If you add this script to a script-library or script-archive
// you have to add a highly visible link to
// http://www.fabulant.com on the webpage
// where this script will be featured

// CONFIGURATION:
// Go to http://www.fabulant.com
// and create your own text animation
// with our new Text Factory.

/////////////////////////////////////////////
// START OF SCRIPT CONFIGURATION 
/////////////////////////////////////////////

// Your messages. Add as many as you like
var text=new Array()
text[0]="Hello webdesigner, try our new Text Animator!"
text[1]="Or create smashing online-slideshows with our Slideshow Factory."
text[2]="They are the best tools to generate eyecatching special effects without any programming skills."

// Add a link for each message
var textlink=new Array()
textlink[0]="http://www.fabulant.com"
textlink[1]="http://www.fabulant.com"
textlink[2]="http://www.fabulant.com"

// Add a target for each link
// Possible values are "_blank", "_self", "_top", "_parent"
var texttarget=new Array()
texttarget[0]="_top"
texttarget[1]="_top"
texttarget[2]="_top"

// Set the font
var textfont="Arial"

// Set the two fontcolors
var textfontcoloraa="#FFFFFF"
var textfontcolorbb="#FFFF00"

// Set the fontcolors on mouseover (rollover)
var textfontcolorrollover="#ff0000"

// Set fontsize (pt)
var textfontsize=12

// Set the backgroundcolor
var textbgcolor="#000000"

// Type "bold" for bold text and "normal" for normal text
var textweight="bold"

// Type "italic" for italic text and ""normal" for normal text
var textitalic="normal"

// Ser the width and height of the scroller-box
var textwidth=400
var textheight=40

// Set the color of the scroller-box border
var textbordercolor="#888888"

// Set the width of the border
var textborder=1

// Set the width of the transparent zones on the left and on the right (pixels)
var translayerszone=80

/////////////////////////////////////////////
// END OF SCRIPT CONFIGURATION 
/////////////////////////////////////////////

// Do not edit the values below this line
var textpause=0
var textdecoration="none"
var textalignonly="center"
var i_text=0
var textcontent=""
var thisspan=""
var content=""
var contentbg=""
var toggle=1
var timer
var scrollready=true
var tablewidth
var tableheight
var textfontcolortoggle=new Array()
var toggle=1            
var step=2;          
var content
var padding=3
var textcontentheight
var textcontentwidth
var translayerswidth=4
var translayersmax=Math.floor(translayerszone/translayerswidth)
var translayersleftpos=0
var translayersopacity=100
var translayersfactor=100/translayersmax
var translayerswidthall=translayersmax*translayerswidth

getcontent()
function getcontent() {
	tablewidth=textwidth-2*textborder
	tableheight=textheight-2*textborder
	content="<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*=-1
		content+="<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>"

}

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+'px; height:'+textheight+'px" ></div>');
document.write('</td></tr></table>')

document.write('</div>')
document.write('<span ID="tickersize" style="position:absolute;top:0px;left:-5000px;visibility:hidden">'+content+'</span>')

function doscroll(){
	if (scrollready) {
	document.getElementById('ticker').style.left=parseInt(document.getElementById('ticker').style.left)-step+"px"
	if (parseInt(document.getElementById('ticker').style.left)<-textcontentwidth) {
		document.getElementById('ticker').style.left=textwidth+"px"
	}

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(){
	textcontentwidth=document.getElementById('tickersize').offsetWidth
	document.getElementById('roof').style.left=DL_GetElementLeft(document.getElementById('marker'))+"px";
	document.getElementById('roof').style.top=DL_GetElementTop(document.getElementById('marker'))+"px";
	document.getElementById('ticker').style.left=textwidth+"px"
	document.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=true
		checkscroll()
	}
	else {
		scrollready=false
	}
}

function checkscroll() {
	clearTimeout(timer)
	if (scrollready) {
		doscroll()
	}
}

function reopenpage() {
	history.go(0)
}

window.onresize=reopenpage
window.onload=initscroller
</script>

Step 2: Go to the top of the script and configure text, textsize, textcolor, backgroundcolor, scrollersize, bordercolor, links and fade effects.