« »

Is this a right-to-left-scroller? Is this a flash-animation? Is this an eyecatching letter-show? We think it is all in one. And above all it is the prove that even a simple scroller can add visual magic to your site. Crossbrowser (Netscape users will see a scroller without the unique multicolor effect.)

Label: MagicScroller: add visual magic to your messages

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Free iPage Web Hosting for First Year NOW

If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage. Try iPage for FREE First Year NOW

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -
// MagicScroller

// Edit the variables below:

// Your messages. Add as many as you like
var message=new Array()
message[0]="FREE Javascript FROM ABOUT.COM: CLICK HERE."
message[1]="JAVASCRIPT TRICKS FROM JSBank: CLICK HERE."



// the URLs of your messages
var messageurl=new Array()
messageurl[0]="http://jsbank.topcities.com"
messageurl[1]="http://jsbank.topcities.com"

// the targets of the links
// accepted values are '_blank' or '_top' or '_parent' or '_self'
// or the name of your target-window (for instance 'main')
var messagetarget=new Array()
messagetarget[0]="_blank"
messagetarget[1]="_blank"

// the images that create the magic effect of the letters.
// You can add an image for each message 
var messageimage=new Array()
messageimage[0]="../image/pic191.jpg"
messageimage[1]="../image/logojs.gif"

// font-color of messages (required for Netscape Navigator)
var messagecolor="blue"

// distance of the scroller to the left margin of the browser-window (pixels)
var scrollerleft=20

// distance of the scroller to the top margin of the browser-window (pixels)
var scrollertop=20

// speed 1: lower means faster
var pause=20

// speed 2: higher means faster
var step=4

// font-size
var fntsize=30

// font-family
var fntfamily="Arial"

// font-weight: 1 means bold, 0 means normal
var fntweight=1

// do not edit the variables below
var imgpreload=new Array()
for (i=0;i<=messageimage.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=messageimage[i]
}
var scrollerwidth=368
var scrollerheight=60
var backgroundimagecontent
var clipleft,clipright,cliptop,clipbottom,clipleftbg, cliprightbg
var i_message=0
var timer
var textwidth
var textcontent=""
if (fntweight==1) {fntweight="700"}
else {fntweight="100"}

function init() {
	gettextcontent()
    if (document.all) {
        backgroundimagecontent="<img src='"+messageimage[0]+"' width='"+scrollerwidth+"'>"
		text.innerHTML=textcontent
        textwidth=text.offsetWidth
		backgroundimage.innerHTML=backgroundimagecontent
        document.all.text.style.height=scrollerheight
		document.all.text.style.posTop=scrollertop
        document.all.text.style.filter="chroma(color="+messagecolor+")"
        document.all.text.style.posLeft=scrollerleft+scrollerwidth
		document.all.backgroundimage.style.posTop=scrollertop
        document.all.backgroundimage.style.posLeft=scrollerleft
		clipleft=0
		clipright=0
		cliptop=0
		clipbottom=scrollerheight
        clipleftbg=scrollerwidth
        cliprightbg=scrollerwidth
		document.all.text.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
        document.all.backgroundimage.style.clip="rect("+cliptop+" "+cliprightbg+" "+clipbottom+" "+clipleftbg+")"
        scrolltext()
    }
	if (document.layers) {
		document.textnetscape.document.write(textcontent)
		document.textnetscape.document.close()
		textwidth=document.textnetscape.document.width
		document.textnetscape.top=scrollertop
		document.textnetscape.left=scrollerleft+scrollerwidth
		document.textnetscape.clip.left=0
		document.textnetscape.clip.right=0
		document.textnetscape.clip.top=0
		document.textnetscape.clip.bottom=scrollerheight
        scrolltext()
    }
}

function scrolltext() {
    if (document.all) {
		if (document.all.text.style.posLeft>=scrollerleft-textwidth) {
			document.all.text.style.posLeft-=step
			clipright+=step
            clipleftbg-=step
			if (clipright>scrollerwidth) {
				clipleft+=step
			}
            if (document.all.text.style.posLeft<scrollerleft-textwidth+scrollerwidth) {
				cliprightbg-=step
			}
			document.all.text.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
             document.all.backgroundimage.style.clip="rect("+cliptop+" "+cliprightbg+" "+clipbottom+" "+clipleftbg+")"
			
			var timer=setTimeout("scrolltext()",pause)
		}
		else {
			changetext()
		}
	}
   if (document.layers) {
		if (document.textnetscape.left>=scrollerleft-textwidth) {
			document.textnetscape.left-=step
			document.textnetscape.clip.right+=step
			if (document.textnetscape.clip.right>scrollerwidth) {
				document.textnetscape.clip.left+=step
			}
			var timer=setTimeout("scrolltext()",pause)
		}
		else {
			changetext()
		}
	}
}

function changetext() {
    i_message++
	if (i_message>message.length-1) {i_message=0}
	gettextcontent()
	if (document.all) {
		text.innerHTML=textcontent
		textwidth=text.offsetWidth
        backgroundimagecontent="<img src='"+messageimage[i_message]+"' width='"+scrollerwidth+"'>"
        backgroundimage.innerHTML=backgroundimagecontent
        document.all.text.style.posLeft=scrollerleft+scrollerwidth
		clipleft=0
		clipright=0
        clipleftbg=scrollerwidth
        cliprightbg=scrollerwidth
		document.all.text.style.clip="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
        document.all.backgroundimage.style.clip="rect("+cliptop+" "+cliprightbg+" "+clipbottom+" "+clipleftbg+")"
        scrolltext()
	}

	if (document.layers) {
   		document.textnetscape.document.write(textcontent)
		document.textnetscape.document.close()
		textwidth=document.textnetscape.document.width
		document.textnetscape.left=scrollerleft+scrollerwidth
		document.textnetscape.clip.left=0
		document.textnetscape.clip.right=0	
        scrolltext()
	}
}

function gettextcontent() {
	textcontent="<span style='position:relative;font-size:"+fntsize+"pt;font-family:"+fntfamily+";font-weight:"+fntweight+"'>"
	textcontent+="<a href="+messageurl[i_message]+" target="+messagetarget[i_message]+">"
	textcontent+="<nobr><font color="+messagecolor+">"+message[i_message]+"</font></nobr></a></span>"
}

window.onresize=init;

// - End of JavaScript - -->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<BODY onLoad="init()">
<DIV ID="backgroundimage" style="position:absolute;left:-2000px;"></DIV>

<DIV ID="text" style="position:absolute;left:-2000px; background-color:white;filter:chroma(color=black;);"></DIV>

<DIV ID="textnetscape" style="position:absolute;left:-2000px;"></DIV>
</BODY> 
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Comment (2)
Write

by domoKnorire, 28/12/2010 12:12 AM
Hello all Reply

hello all girls and boys.

by amisbusiabeta, 14/06/2011 12:06 AM
Compensation Reply

hello, everybody very likely does not remember or bear in mind me, but I recollect you ...
I'm with you and I hope that now feel a real family. So decidedly it all later to lure and command what next ...
regards

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
~~Your site~~

Comment's title

I assure 100% I am real human
I repeat I am not bot

Sent (0)
New

BBCode
HTML
URL
JID

Submit day:
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:

30/01/2007
Peter Gehrig [more]
2,400
2
0
0
8.18 KBytes

JavaScript MagicScroller: add visual magic to your messages

0/5 0 votes / 2,400 previews / 2 comment 30/01/2007 Is this a right-to-left-scroller? Is this a flash-animation? Is this an eyecatching letter-show? We think it is all in o...JavaScript MagicScroller: add visual magic to your messages - MagicScroller: add visual magic to your messages

thaonguyen_36[2] Doanngocthanh trungnd

Let's be first member to do this

pnqhoaa2 vuphuonganh Doanngocthanh