animazione testo

**diwla** · 10-01-2007, 16:20

Ciao a tutti,
vorrei fare un'animazione su dei collegamenti di un menu simile a quella che si vede sul menu di questo sito:
http://www.indigo6.com/

qui è realizzata in flash, è possibile fare una cosa del genere in javascript?

**dvjack** · 10-01-2007, 17:15

a mio avviso si può fare tranquillamente in javascript, utilizzando le scritte in due colori in uno stesso div e poi all'evento mouseover, si fa scrollare il div verso il basso, e per il mouseout si scrolla verso l'alto, il comando javascript per scrollare è scrollTop. Non sono sicuro però che sia compatibile con tutti i browser, dovrebbe non andare con Opera versioni antecedenti la 9.

**diwla** · 10-01-2007, 18:27

mi potresti aiutare a costruire il tutto...
non mi intendo molto di javascript e non saprei come procedere...

diciamo che tanto per cominciare mi creo un div con le due scritte

<div>
prova

<font color="#417BC2">prova</font>
</div>

... e poi?

**dvjack** · 11-01-2007, 11:17

forse, si può semplificare un pò utilizzando il tag marquee...però ora come ora non ho il tempo fisico per scriverti il codice, mi spiace...

**diwla** · 11-01-2007, 11:45

qualcuno mi può aiutare a fare questa cosa?
... dovrebbe essere abbastanza semplice in fondo...
è solo che non saprei proprio come procedere...
AIUTOOO....

**diwla** · 11-01-2007, 14:29

**dvjack** · 12-01-2007, 00:03

Ho trovato 10 minuti e ho fatto un esempio,spero che possa andarti bene.
Ecco il codice della pagina di prova.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
/*<![CDATA[*/
ul.menu { list-style:none;}
ul.menu li{ display:inline;
			width:80px; /* Larghezza elemento del menu */
			float:left;}
ul.menu li div{ height:20px; /* Altezza riga menu */
				overflow:hidden;}
ul.menu a{ text-decoration:none;
			display:block;}
ul.menu a.bottom,ul.menu a.bottom:hover{color:#000000;}/* Colore principale */
ul.menu a.up,ul.menu a.up:hover{ color:#990000;} /* Colore superiore */
/*]]>*/
</style>
<script language="javascript" type="text/javascript">
/*<![CDATA[*/
var time=15;

function init_menu(id){
	var mn=document.getElementById(id);
	var dl=mn.getElementsByTagName('div');
	for (var i=0;i<dl.length;i++){  dl[i].scrollTop+=dl[i].offsetHeight;} 
}
function goUp(obj){
	obj=obj.getElementsByTagName('div')[0];
	for (var i=0;i<obj.offsetHeight;i++){ 

setTimeout('document.getElementById(\''+obj.id+'\').scrollTop-=1',i*time);}
					}
					
function goDown(obj){
	//clearTimer();
	obj=obj.getElementsByTagName('div')[0];
	for (var i=0;i<obj.offsetHeight;i++){ 

setTimeout('document.getElementById(\''+obj.id+'\').scrollTop+=1',i*time);}
					}
/*]]>*/
</script>
</head>

<body onload="init_menu('menu1')">
<ul class="menu" id="menu1">
	<li onmouseover="goUp(this)" onmouseout="goDown(this)"><div id="el1">Item 1Item 1</div>
	<li onmouseover="goUp(this)" onmouseout="goDown(this)"><div id="el2">Item 1Item 1</div>
	<li onmouseover="goUp(this)" onmouseout="goDown(this)"><div id="el3">Item 1Item 1</div>
	<li onmouseover="goUp(this)" onmouseout="goDown(this)"><div id="el4">Item 1Item 1</div>[/list]
</body>
</html>

e la sua versione online, per poterla vede in azione: demo

io l'ho provato su Firefox 2.0, IE 6 e Opera 9

**diwla** · 12-01-2007, 10:52

Ciao dvjack,
grazie per l'aiuto ma ho dei piccoli problemi:
il link alla demo non mi funziona...
copiando e incollando il codice così come l'hai postato mi dà errore alla riga 35: Previsto ')'
la riga 35 è questa:

setTimeout('document.getElementById(''+obj.id+''). scrollTop-=1',i*time);}

a me non sembrano mancare parentesi però questo è l'errore che segnala il browser...

**diwla** · 12-01-2007, 13:29

ok... ho trovato l'errore:
setTimeout('document.getElementById(\''+obj.id+'\' ).scrollTop-=1',i*time);}

grazie di tutto...

**dvjack** · 14-01-2007, 13:58

ok... ho trovato l'errore:
setTimeout('document.getElementById(\''+obj.id+'\' ).scrollTop-=1',i*time);}

purtroppo il forum toglie gli slash...

e non me n'ero accorto...

Discussione: animazione testo

Strumenti discussione

Ricerca discussione

Visualizza

animazione testo

Permessi di invio