JavaScript Resources - Zooming Text

Here's another way of presenting animated titles. Not only does the text appear to zoom in, the final line fades out, instead of repeating as in the previous example. The script can easily be amended to leave the last line visible and static, if desired, though. This would be ideal on an entry page to a site.Here's the code; like the previous example it uses absolute positioning:

<script language="JavaScript" type="text/javascript">
/*This script is made by bratta at www.bratta.com and can be used freely
as long as this msg is instact. I would appriciate any links to my page.
########################################################################
########################################################################
########################################################################
If you want the text to appear differently on anothe place on the page
or anything set that in the style tag of the zoom layer. 
Here are the variables you have to set:									
First the text: (it will stop and fade/change the colors on the last one)*/
	text=new Array('Welcome to','JavaScript','Resources!','JavaScript Resources')
//set the number of text's
	var numText=4
//Now the colors:
//all you have to do is set the color you want to have in here: 
//(the first color will be the color that the text is when it zooms.)
	color=new Array('#000099','#0066ff','#00ccff','#00ffff','#ccffff')
//set the number of colors:
	var numColors=5
//set the size you want the zoom to end at:
	var endSize=52
//Set the speed you want it to zoom in (in milliseconds)
	var Zspeed=200
//Set the speed you want it too change colors in
	var Cspeed=250
//Set font
	var font='Arial, Helvetica'
//do you want it to hide when its done? (true or false)
	var hide=true
//You shouldn't really have to set anything below this point

var size=10

var gonum=0

//Browsercheck and settings vars

if (document.all) {

n=0

ie=1

zoomText='document.all.zoom.innerText=text[num]'

zoomSize='document.all.zoom.style.fontSize=size'

closeIt=""

fadeColor="document.all.zoom.style.color=color[num]"

}

if (document.layers) {

n=1;ie=0

zoomText=""

zoomSize="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+size+'px; color:'+color[0]+'\">'+text[num]+'</p>')"

closeIt="document.zoom.document.close()"

fadeColor="document.zoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+endSize+'px; color:'+color[num]+'\">'+text[numText-1]+'</p>')"

}

//The functions for zooming text.

function zoom(num,fn){

if (size<endSize){

eval(zoomText)

eval(zoomSize)

eval(closeIt)

size+=5;

setTimeout("zoom("+num+",'"+fn+"')",Zspeed)

}else{

eval(fn);

}

//The functions for fading/changing colors on text

function fadeIt(num){

if (num<numColors){

eval(fadeColor)

eval(closeIt)

num+=1;

setTimeout("fadeIt("+num+")",Cspeed)

}else{

hideIt()

}

//This is the function that hides the layer after the zoom/color change

function hideIt(){

if(hide){

if(ie)document.all.zoom.style.visibility="hidden"

if(n)document.layers.zoom.visibility="hidden"

}

//This is the functions that calls the right function...or something :}

function init(){

if(ie){

document.all.zoom.style.color=color[0]

document.all.zoom.style.fontFamily=font}

go(0)

}

function go(num){

gonum+=1

size=10

if(num<numText){

zoom(num,'go('+gonum+')')

}else{

fadeIt(0)

}

// -->
</script>

<div id="zoom" align="center" style="position:absolute; top:150">Welcome to JavaScript Resources</div>

Script by: bratta.