Faire defiler les couleurs d'un texte

FoX_*D i E* · 09/03/2010, 14h53

Bonjour a tous,

Voici ce que je cherche a faire sur une page web:

1- Afficher un texte multicolore dont les couleurs defilent.

2- Faire en sorte que ce texte soit un lien.

Le 1- est pour attirer l'attention du visiteur. Apres l'avoir imaginer, je me suis rappele que dans le jeu Final Fantasy VII, ils utilisent le meme effet:

Si vous voulez un apercu de ce que je veux faire, regardez a la 23 eme seconde de cette video, le mot "Limit":
http://video.google.com/videoplay?do...8341556477134#

Je me suis base sur cet article et cet article pour ecrire ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
 
</HEAD>
<BODY  onload="TimeDegrade(200,0,120,0,0,100,'Un exemple de texte dégradé multicolore !',1)">
<SCRIPT LANGUAGE="JavaScript">
 
	var hexa = "0123465789ABCDEF";
	var date = new Date();
	var T = date.getTime();
 
	function DecToHexa(DecNb) {
		x = Math.floor(DecNb / 16);
		h = hexa.charAt(x);
		x = DecNb % 16;
		h += hexa.charAt(x);
 
		return h;
	}
 
	function Degrade(dr,dg,db,fr,fg,fb,texte) {
		content="";
		steps = texte.length;
		cr = dr; cg = dg; cb = db;
		sr = (fr - dr) / steps;
		sg = (fg - dg) / steps;
		sb = (fb - db) / steps;
 
		for (var x = 0; x <= steps; x++) {
			content += "<FONT COLOR='#" + DecToHexa(cr) + DecToHexa(cg) + DecToHexa(cb) +"'>";
			content +=texte.charAt(x);
			content +="</FONT>";
			cr += sr; cg += sg; cb += sb;
		}
		tdegrade1.innerHTML=content;
	}
 
	function TimeDegrade(dr,dg,db,fr,fg,fb,texte,k) {
	t = k*T;
	Degrade(dr+t%256,dg+t%256,db+t%256,fr+t%256,fg+t%256,fb+t%256,texte);
	setTimeout("TimeDegrade("+dr+","+dg+","+db+","+fr+","+fg+","+fb+","+texte+","+k+")", 2);
	}
</SCRIPT>
<br><br><br><br><br><br><br>
<div id="tdegrade1">
</div>
</BODY>
</HTML>

Mais cela ne fonctionne pas, le texte ne change pas de couleur, et en plus (la je ne comprend vraiment pas) les couleurs ne se suivent pas, alors que si on met t=0 au lieu de t=k*T, on a des couleurs fixes, mais qui grraduent correctement.

alors pour le 1-, j'aimerais avoir une solution pour que les couleurs changent, mais pas n'importe comment, on devrait voir comme un defilement de gauche a droite.

Pour le 2-, imaginons que le 1- fonctionne, je ne sais pas comment changer le style CSS des liens non visites/deja visites pour que le defilement de couleur fonctionne encore.
Peut etre que pour avoir le 2- et le 1-, je devrait proceder autrement en creant un style CSS bien speciale, mais la aussi je suis perdu.

Merci d'avance pour votre aide.

**Ethyde** · 09/03/2010, 18h34

Bonjour,

a mon avis tu auras plus de réponse si un gentil modérateur déplace ton post dans la rubrique Javascript

**SpaceFrog** · 09/03/2010, 22h58

A l'arrache un truc comme ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<script type='text/javascript'>
var rainbow=new Array('red','orange','yellow','green','blue','indigo','violet');
var step=0
function arcenciel(chaine){
tabchaine=chaine.split('')
var i=0
var arc=document.createElement('div')
while(tabchaine[i++]){
	var lettre=document.createElement('span')
	lettre.innerHTML=(tabchaine[i-1]==" ")?"&nbsp;":tabchaine[i-1];
	lettre.id='lettre'+(i-1)
	arc.appendChild(lettre)
	}
document.body.appendChild(arc)
var irise=setInterval (function(){colorise(tabchaine.length)},100)
}
 
 
function colorise(long){
temp=step
 
for (i=0;i<long; i++){
   couleur=(long+temp-i) % 7
   document.getElementById('lettre'+i).style.color=rainbow[couleur]
   }
   step++
   }
</script >
<style type="text/css">
body {background-color: silver;}
</style>
 
</head>
 
<body onload="arcenciel('un texte entier qui brille comme un arc en ciel')">
 
</body>
 
</html>

FoX_*D i E* · 11/03/2010, 13h27

ok j'ai essayer de comprendre ce script un peu plus tard parce que y a des choses que je veux modifier et le javascript c pas evident pour moi. par exemple, c'est quoi le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setInterval (function(){colorise(tabchaine.length)},100)

la fonction et son argument, pourquoi ce function() ?

Ensuite chers webmasters, avez-vous une idees pour que les liens aient cet effet?

**SpaceFrog** · 11/03/2010, 13h39

pourquoi function ?
tout simplement parceque setINterval attend en paramètre une fonction, sinon il est obligé d'évaluer un string ...

Pour ce qui est de l'appliquer aux liens ...
il suffirait de mettre une class specifique aux textes concenés et les remplacer par le code généré par ce script ...

http://danielhagnoul.developpez.com/...s/LasVegas.php

FoX_*D i E* · 11/03/2010, 15h15

ok, j'ai trouve, sinon j'entoure le texte de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<u style="cursor:pointer;" onclick="location.href='http://...'"><DIV DU TEXTE MULTICOLOR></u></h2>

Merci pour le lien, j'vais m'en inspire du coup

RESOLU

Faire defiler les couleurs d'un texte

JavaScript

Discussions similaires

Partager

Partager