Demo Dynamic HTML - Efecto "fade" (difuminado)

Efecto "fade" (difuminado)

Compatibilidad: Ms Internet Explorer

Buena demo para generar frases que se difuminan para dejar sitio a otras. Es posible impostar el color del texto y del fondo, además de asociar enlaces a cada parte visualizada del texto.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

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

/********************************************************************************
Here are the variables you must set: (this is the only part you have to change)

Remember tho, if you wan't different size for the layers, different clip or anything
change that in the stylesheet.
*/

//The delay between the fades (in milliseconds) smaller value gives less time:
betweendelay=1000

//Do you wan't it to start over on the first one when it's gone trought all the news?
//(set to 0 if not)
var loop=1

//What font do you wan't it use?
FontFace='arial,helvetiva'

//What font-size (in pixel)?
FontSize=12

//Do you wan't it to fade out aswell? 1 for on, 0 for off
fadeback=1

//Set the colors, first color is same as background, last color is the color it stops at:
//You can have upto 7 colors, set the ones you wan't use to 0
colors=new Array()
colors[0]='#FFFFFF'
colors[1]='#EEEEEE'
colors[2]='#CCCCCC'
colors[3]='#999999'
colors[4]='#666666'
colors[5]='#333333'
colors[6]='#000000'

//This is the news you wanna have, set the link and the text. If you don't wan't it to link anywhere
//use a # as the link
news=new Array(new Array(),new Array())
news[0]["text"]="HTMLpoint e' il sito italiano sul Web publishing"
news[0]["link"]="http://www.htmlpoint.com"
news[1]["text"]="Tutto per lo sviluppatore professionista e per il neofita dell'HTML"
news[1]["link"]="http://www.htmlpoint.com"

/*Dont change anything below this!
*********************************************************************************/
fadeInit=new Function("oNews=new makeObj('divNews','divCont'); fadeNews(0)")
function makeObj(obj,nest){
    nest=(!nest) ? '':'document.'+nest+'.'
    this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
    this.writeref=(n) ? eval(nest+'document.'+obj+'.document'):eval(obj);		
	this.fadeIt=b_fadeIt
    this.obj = obj + "Object"; 	eval(this.obj + "=this")	
}
function b_fadeIt(text,link,font,size,speed,fn,num,c0,c1,c2,c3,c4,c5,c6){
	if(num<arguments.length && arguments[num]!=0){
		writetext='<a href="'+link+'" style="text-decoration:none; font-size:'+size+'px">'
		+'<font face="'+font+'" color="'+arguments[num]+'">'+text+'</font></a>'
		if(n){this.writeref.write(writetext); this.writeref.close()}
		if(ie) this.writeref.innerHTML=writetext		
		num++
		setTimeout(this.obj+'.fadeIt("'+text+'","'+link+'","'+font+'",'+size+','+speed+',"'
		+fn+'",'+num+',"'+c0+'","'+c1+'","'+c2+'","'+c3+'","'+c4+'","'+c5+'","'+c6+'")',speed)
	}else setTimeout('eval('+fn+')',betweendelay)
}
function fadeNews(num){
	if(num<news.length){
		fn=fadeback?'fadeBack('+num+')':'fadeNews('+(num+1)+')';
		oNews.fadeIt(news[num]["text"],news[num]["link"],FontFace,FontSize,100,fn,7,
		colors[0],colors[1],colors[2],colors[3],colors[4],colors[5],colors[6])
	}else if(loop)fadeNews(0)
}
function fadeBack(num){
	if(num>=0){
		oNews.fadeIt(news[num]["text"],news[num]["link"],FontFace,FontSize,100,'fadeNews('+(num+1)
		+')',7,colors[6],colors[5],colors[4],colors[3],colors[2],colors[1],colors[0])
	}
}
onload=fadeInit;
/*End of fadescript
**********************************************************************************/
</script>

</HEAD>

<div id="divCont" style="position:absolute; width:250; height:200; left:200; top:180">
	<div id="divNews" style="position:absolute">
		<script>//We gotta write something here so netscape will make it
		//be the correct size, but we will only write if it's a 4.x browser
		if(document.all || document.layers) document.write("dummy text, dummy"
		+"text, you can place you fist news or a welcome msg or something here." 
		+"If you place these layers inside a table or something you can also"
		+"use this as the msg that browsers that doesn't suport dhtml will see.")
		</script>
	</div>
</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]