JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Text Animator		[View Sample]

Text Animator is a great cross-browser text effect. It fades in and out infinite text messages, with each message optionally being clickable. The only shortcoming of this script is that it has to be absolutely positioned on your page, meaning you have to manually set the coordinates of exactly where you wish the animator to appear on the page. A small sacrifice to make in return for such a cool effect...


Insert into <HEAD>


Insert into <BODY>
<style type="text/css"> <!-- .textanimlink,a { text-decoration : none; } P.main { font-family : Arial; font-size : 15pt; font-weight : bold; } --> </style> <Script Language="Javascript"> <!-- Hiding /* Script created by Lefteris Haritou (lef@the.forthnet.gr) Permission granted to Dynamicdrive.com to feature the script For more DHTML scripts, visit Dynamicdrive.com */ bname=navigator.appName; bversion=parseInt(navigator.appVersion) if ((bname=="Netscape" && bversion>=4) \|\| (bname=="Microsoft Internet Explorer" && bversion>=4)) window.onload=start else stop(); window.onunload=stop if (bname=="Netscape"){ brows=true dt=2 } else{ brows=false dt=20 } var z=0; var msg=0; var rgb=0; var link=false; var status=true; var updwn=false; var message= new Array(); var value=0; var h=window.innerHeight; var w=window.innerWidth; var timer1; var timer2; var timer3; var convert = new Array() var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"); // Put here your own messages. Add as many as you wan't (Do not edit anything else in the Script except the lines below) var bgcolor="#FFFFFF"; //Color of background var color="#00008D"; //Color of the Letters message[0]='The future of JavaScript' message[1]='Today.' message[2]='Dynamic Drive DHTML code library' message[3]='<a href="http://dynamicdrive.com">Click here to begin THE experience</a>' // Put here your own messages. Add as many as you wan't (Do not edit anything else in the Script except the lines above) for (x=0; x<16; x++){ for (y=0; y<16; y++){ convert[value]= hexbase[x] + hexbase[y]; value++; } } redx=color.substring(1,3); greenx=color.substring(3,5); bluex=color.substring(5,7); hred=eval(parseInt(redx,16)); hgreen=eval(parseInt(greenx,16)); hblue=eval(parseInt(bluex,16)); eredx=bgcolor.substring(1,3); egreenx=bgcolor.substring(3,5); ebluex=bgcolor.substring(5,7); ered=eval(parseInt(eredx,16)); egreen=eval(parseInt(egreenx,16)); eblue=eval(parseInt(ebluex,16)); red=ered; green=egreen; blue=eblue; function start(){ if ((bname=="Netscape" && bversion>=4) \|\| (bname=="Microsoft Internet Explorer" && bversion>=4)){ link=false; updwn=true; if (brows) res=document.layers['textanim'].top else{ textanim.style.width=document.body.offsetWidth-20; textanim.innerHTML='<Pre><P Class="main" Align="Center">'+message[msg]+'</P></Pre>' res=textanim.style.top for (x=0; x<document.all.length; x++) if(document.all[x].id=="textanimlink") link=true; } up() } } function stop(){ clearTimeout(timer1); clearTimeout(timer2); clearTimeout(timer3); } function resz(){ h=window.innerHeight; w=window.innerWidth; if (updwn) timer1=setTimeout('up()',1000) else timer2=setTimeout('down()',1000) } function breakf(){ if (status){ clearTimeout(timer1); clearTimeout(timer2); status=false return; } else{ status=true; if (updwn) timer1=setTimeout('up()',dt) else timer2=setTimeout('down()',dt) } } function up(){ if (red<hred){ if ((red+7)<hred) red+=7; else red=hred redx = convert[red] } else{ if ((red-7)>hred) red-=7; else red=hred redx = convert[red] } if (green<hgreen){ if ((green+7)<hgreen) green+=7; else green=hgreen greenx = convert[green] } else{ if ((green-7)>hgreen) green-=7; else green=hgreen greenx = convert[green] } if (blue<hblue){ if ((blue+7)<hblue) blue+=7; else blue=hblue bluex = convert[blue] } else{ if ((blue-7)>hblue) blue-=7; else blue=hblue bluex = convert[blue] } rgb = "#"+redx+greenx+bluex; if (brows){ document.layers['textanim'].document.linkColor=rgb; document.layers['textanim'].document.vlinkColor=rgb; if (window.innerHeight!=h \|\| window.innerWidth!=w){ clearTimeout(timer1); resz() return; } else{ document.layers['textanim'].document.write('<Pre><P Class="main" Align="Center"><font color="'+rgb+'">'+message[msg]+'</font></P></Pre>') document.layers['textanim'].document.close(); } } else{ textanim.style.color=rgb; if(link) textanimlink.style.color=rgb; } if (z<38){ if (brows) document.layers['textanim'].top-- else textanim.style.posTop-- z++ timer1=setTimeout('up()',dt) } else { updwn=false; down() } } function down(){ if (red<ered){ if ((red+7)<ered) red+=7; else red=ered redx = convert[red] } else{ if ((red-7)>ered) red-=7; else red=ered redx = convert[red] } if (green<egreen){ if ((green+7)<egreen) green+=7; else green=egreen greenx = convert[green] } else{ if ((green-7)>egreen) green-=7; else green=egreen greenx = convert[green] } if (blue<eblue){ if ((blue+7)<eblue) blue+=7; else blue=eblue bluex = convert[blue] } else{ if ((blue-7)>eblue) blue-=7; else blue=eblue bluex = convert[blue] } rgb = "#"+redx+greenx+bluex; if (brows){ document.layers['textanim'].document.linkColor=rgb; document.layers['textanim'].document.vlinkColor=rgb; if (window.innerHeight!=h \|\| window.innerWidth!=w){ clearTimeout(timer2); resz() return; } else{ document.layers['textanim'].document.write('<Pre><P Class="main" Align="Center"><font color="'+rgb+'">'+message[msg]+'</font></P></Pre>') document.layers['textanim'].document.close(); } } else{ textanim.style.color=rgb; if(link) textanimlink.style.color=rgb; } if (z<76){ if (brows) document.layers['textanim'].top-- else textanim.style.posTop-- z++ timer2=setTimeout('down()',dt) } else { if (brows){ document.layers['textanim'].document.write('') document.layers['textanim'].document.close(); } else textanim.innerHTML=''; window.clearInterval(timer2); if(msg<message.length-1){ msg++; z=0; if (brows){ document.layers['textanim'].top=res; } else textanim.style.top=res; timer3=setTimeout('start()',100); } else { msg=0; z=0; if (brows) document.layers['textanim'].top=res; else textanim.style.top=res; timer3=setTimeout('start()',2000); } } } // done hiding --> </Script> <Div id="textanim" style="position: absolute; left: 0; top: 440" onclick="breakf()"> </Div> <Layer name="textanim" left=0 top=440> </Layer>

Other Options