Download Zooming text script

Put this into your <HEAD> section

	<style type="text/css">
	html{
		height:100%;
	}
	body{
		height:100%;
		color: #000;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		margin:0px;
		padding:0px;
	}
	.zoomingText{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		color: #317082;
	}
	#zoomingTextContainer{
		width:100%;
		height:100%;
		background-color: #FFFFFF;
		position:absolute;
		left:0px;
		top:0px;
		text-align:center;
	}
	.skipIntro{
		position:absolute;
		bottom:10px;
		right:10px;
		color:#000000;	
	}
	.skipIntro a{
		color:#000000;
		font-size:18px;
		text-decoration:none;
	}

	</style>
	<script type="text/javascript">
	/*
	(C) www.dhtmlgoodies.com, September 2005
	
	You are free to use this script as long as the copyright message is kept intact
	
	
	Alf Magne Kalleland
	
	*/	
	var textArray = ['Welcome','To','www.dhtmlgoodies.com'];
	
	var maxFontSize = 70;	// Maximum font size in pixels
	var zoomSpeed = 5; // Lower = Faster
	var fontIncrementBy = 2; // Step of font size incrementation ( Higher = faster)
	var delayBetweenWords = 300;	// Microseconds between each word
	var delayAtEnd = 500; 	// Microseconds delay after last word
	
	var textIndex = 0;	// Don't change this value
	function executeZoomScript()
	{
		var obj = document.getElementById('zoomingText');
		if(textIndex<textArray.length){
			
			obj.style.fontSize = '1px';
			obj.style.lineHeight = document.body.clientHeight + 'px';
			obj.innerHTML = textArray[textIndex];
			zoomText();	
		}else{
			setTimeout("document.getElementById('zoomingTextContainer').style.display = 'none'",delayAtEnd);
		}
	}
	
	function zoomText(){
		var obj = document.getElementById('zoomingText');
		var fontSize = obj.style.fontSize.replace('px','');
		fontSize = fontSize/1 + fontIncrementBy;
		obj.style.fontSize = fontSize + 'px';
		if(fontSize<maxFontSize){
			setTimeout('zoomText()',zoomSpeed);
		}else{
			textIndex++;
			setTimeout('executeZoomScript()',delayBetweenWords);
		} 	
		
	}
	window.onload = executeZoomScript;
	
	
	</script>

Put this into your <body> section

<div id="zoomingTextContainer">
	<span class="zoomingText" id="zoomingText"></span>
</div>

Configuration

Add words

The words are added to the script with this line:
var textArray = ['Welcome','To','www.dhtmlgoodies.com'];

Fonts and colors

Fonts and colors for the words and the "Skip intro" link is specified in the CSS. This is the part for the zooming text:
.zoomingText{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial
color: #317082;
}

And the "Skip intro" link is set with these lines:
.skipIntro a{
    color:#000000;
    font-size:18px;
    text-decoration:none;
}

Other options

var maxFontSize = 70; // Maximum font size in pixels
var zoomSpeed = 5; // Lower = Faster
var fontIncrementBy = 2; // Step of font size incrementation ( Higher = faster)
var delayBetweenWords = 300; // Microseconds between each word
var delayAtEnd = 500; // Microseconds delay after last word