Demo Dynamic HTML - Títulos impactantes

Títulos impactantes

Compatibilidad: Ms Internet Explorer, Netscape

Esta demo visualiza el texto de grande a pequeño obteniendo un efecto gráfico muy ineresante.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

/*If you want the text to appear differently on another 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:*/
	text=new Array('www','html','it','HTMLpoint')
	
//the color of the text:
	color="#000000"
	
//set the size you want the zoom to start at:
	var startSize=100
	
//set the size you want the zoom to end at:
	var endSize=5

//Set the speed you want it to zoom in (in milliseconds)
	var Zspeed=30

//Set font
	var font='Arial Black'
	
//do you want it to hide when its done? (true or false)
	var hide=true

/*You can remove this if you don't wan't it to start right away.
You can have it start if someone clicks a link (make a link like this:
<a href="#" onclick="fadeInit()">Click to Zoomtext</a>)*/
	onload=zoomInit;
	
/*You shouldn't really have to set anything below this point
****************************************************************************
****************************************************************************
*****************************************************************************/
var size=startSize
var gonum=0
/*Browsercheck and settings vars
****************************************************************************/
var ie, n;
if (document.all) {
		n=0
		ie=1
		zoomText='document.all.divZoom.innerText=text[num]'
		zoomSize='document.all.divZoom.style.fontSize=size'
		closeIt=""
		fadeColor="document.all.divZoom.style.color=color[num]"
	}
if (document.layers) {
		n=1;ie=0
		zoomText=""
		zoomSize="document.divZoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+size+'px; color:'+color+'\">'+text[num]+'</p>')"
		closeIt="document.divZoom.document.close()"
		fadeColor="document.divZoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+endSize+'px; color:'+color+'\">'+text[numText-1]+'</p>')"
	}

/*The functions for zooming text.
****************************************************************************/
function zoom(num,fn){
	if (size>endSize){
		eval(zoomText)
		eval(zoomSize)
		eval(closeIt)
   		size-=10;
		setTimeout("zoom("+num+",'"+fn+"')",Zspeed)
	}else{
		eval(fn)
	}
}

/*This is the function that hides the layer after the zoom/color change
****************************************************************************/
function hideIt(){
	if(hide){
		if(ie)document.all.divZoom.style.visibility="hidden"
		if(n)document.layers.divZoom.visibility="hidden"
	}
}
/*This is the functions that calls the right function...or something :}
****************************************************************************/
function zoomInit(){
	if(ie){
		document.all.divZoom.style.color=color
		document.all.divZoom.style.fontFamily=font
	}
	if(ie || n) go(0)	
}
function go(num){
	gonum+=1
	size=startSize
	if(num<text.length){
		zoom(num,'go('+gonum+')')
	}else{
		hideIt()
	}
}

function playAgain(){
	size=startSize
	gonum=0
	if(ie) document.all.divZoom.style.visibility='visible'
	else if(n) document.layers.divZoom.visibility='visible'
	zoomInit()
}
//***************************************************************************
</script>

</HEAD>

<div id="divZoom" align="center" style="position:absolute; top:150"></div>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]