Home + Webmaster + Script + Javascript + Effetti su testo + Effetto fade e scroll

Effetto fade e scroll

Script che permette al testo di scomparire e apparire differente con aggiunta dello scroll.

<html>
<head>
<title>Testo con effetto fade e scroll</title>
<style>
body{background-color:#FFFFFF}
A{color:Navy; text-decoration:none}
A:hover{color:red}
A:visited:{color:#808080}
</style>
<script language="JavaScript1.2">
/********************************************************************************
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. 
This may be used freely as long as this msg is intact!
********************************************************************************
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0
/********************************************************************************
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 slide and the fade (in milliseconds), bigger value=more time
delayslidefade=1000

//The delay between the fade and the next slide
delayfadeslide=1000
//REVISED: added this:
//Slide speed (how many pixels per time)
movePx=10

//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? 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. Just copy the three lines and change the numbers.
//REVISED: I had a error in a below function that made it only take 2 news, that should now be fixed.
news=new Array()

news[0]=new Array()
news[0]["text"]="link testuale"
news[0]["link"]="http://www.indirizzo.it"
news[1]=new Array()
news[1]["text"]="Giochi online"
news[1]["link"]="http://www.indirizzo.it"
news[2]=new Array()
news[2]["text"]="Gioca Vinci!"
news[2]["link"]="http://www.indirizzo.it"

/*Dont change anything below this!
*********************************************************************************/
fadeInit=new Function("oNews=new makeObj('divNews','divCont'); nextSlide(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.left=b_getleft; this.top=b_gettop
    this.obj = obj + "Object"; 	eval(this.obj + "=this")	
}
function b_getleft(){
	var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);
	return gleft;
}
function b_gettop(){
	var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
	return gleft;
}
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+')',delayfadeslide)
}
function nextSlide(num){
	if(num<news.length){
		oNews.css.top=80
		oNews.fadeIt(news[num]["text"],news[num]["link"],fontface,fontsize,100,'slideNews('+num+')',13,'','','','','','',colors[6])
	}else if(loop) nextSlide(0)
}

function slideNews(num){
	if(oNews.top()>0){
		oNews.css.top=oNews.top()-movePx
		setTimeout("slideNews("+num+")",30)
	}else if(fadeback){
		setTimeout("oNews.fadeIt(news["+num+"]['text'],news["+num+"]['link'],fontface,fontsize,100,'nextSlide("+(num+1)+
		")',7,colors[6],colors[5],colors[4],colors[3],colors[2],colors[1],colors[0])",delayslidefade)	
	}else setTimeout("nextSlide("+(num+1)+")",delayslidefade)
}
onload=fadeInit;
/*End of fadescript
**********************************************************************************/
</script>
</head>

<body>
<a href="http://www.indirizzo.it">LINK TESTUALE</a>

<div id="divCont" style="position:absolute; width:250; height:200; left:300; top:230; clip:rect(0,250,70,0)">
	<div id="divNews" style="position:absolute; top:80">
		<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>

Compatibilità: MsIE | Netscape

Javascript

Altre risorse:
Libri Javascript | Manuale Javascript

E-Learning Scopri il catalogo dei corsi, da quello per webmaster a quelli di programmazione avanzata!

Hosting illimitato Scegli l'offerta di hosting illimato di Hostek per il tuo sito web. Ottimo servizio e soprattutto ottimi prezzi!