Faire passer un texte progressivement d'une couleur donnee a une autre.

Grand Mamamouchi Messages postés 33 Date d'inscription mardi 21 septembre 2004 Statut Membre Dernière intervention 6 mai 2005 - 21 sept. 2004 à 05:33
Grand Mamamouchi Messages postés 33 Date d'inscription mardi 21 septembre 2004 Statut Membre Dernière intervention 6 mai 2005 - 21 sept. 2004 à 23:45
Super, ca marche, merci a vous tous !

Grace au debugage efficace de Ghislain, le script est devenu operationnel.

Le voici :

dstr7hbtrdu6tniui76un76856rn5e754ne758n556

<script>

conteneur_dhtml = document.getElementById('conteneur_html')

cumulated_duration = 0

function make_disappear(total_duration)
{
if( cumulated_duration >=total_duration ) return;
ton = parseInt(255 * cumulated_duration/total_duration);
conteneur_dhtml.style.color = 'rgb('+ton+ ',255,'+ton+')';
cumulated_duration +=total_duration/255;
setTimeout('make_disappear('+total_duration+')',duree_totale/255);
}
make_disappear(5000)

</script>

La prochaine etape est que je souhaiterais que la transformation commence a une couleur donnee, et se finisse a une autre couleur donnee.

Et la, j'ai vraiment besoin de vos lumieres !

A bientot !

Dominique

2 réponses

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
21 sept. 2004 à 10:41
Bonjour,
un script qui ressemble à celui en exemple,
avec début et fin.
<HTML>
<HEAD>
<TITLE>changement de couleur progressif</TITLE>
</HEAD>

exemple de texte

<script type="text/JavaScript">
var fin=new Array(160,140,0);//couleur à atteindre
var deb=new Array(30,20,10);//couleur début
var pas=10;//pour faire varier couleur : ##### doit permettre d'atteindre fin ##### deb(0 à 2)+(n fois pas)=fin(0 à 2)
var delai=100;//temps entre 2 variations
function nvcouleur()
{  var couleur="rgb(";
   var ok=true;
   for (var n=0;n<deb.length;n++)
{ if (n>0) couleur+=",";
  couleur+=deb[n];
  if (deb[n]<fin[n]) 
{ ok=false; 
  deb[n]=deb[n]+pas; } 
  else
  { if (deb[n]>fin[n]) 
{ ok=false; 
  deb[n]=deb[n]-pas;  }  }  }
   couleur+=")";
   div1.style.color=couleur;
   window.status=couleur;
   if (!ok) window.setTimeout("nvcouleur();",delai);  }

nvcouleur();
</script>

</HTML>

Cordialement Bul. [
0
Grand Mamamouchi Messages postés 33 Date d'inscription mardi 21 septembre 2004 Statut Membre Dernière intervention 6 mai 2005
21 sept. 2004 à 23:45
Bonjour bultez !

et merci de ta contribution. Je vais l'etudier avec interet,
et attention.

Grace a l'aide des uns et des autres, j'en suis arrive au script
suivant, que je trouve assez satisfaisant :

<script language = 'Javascript' >

r_fond = 250
v_fond = 128
b_fond = 114

r_texte = 0
v_texte = 100
b_texte = 0

r_courante = r_fond
v_courante = v_fond
b_courante = b_fond

delai = 22
pause = 3000

function faire_apparaitre()
{
if( r_courante r_texte && v_courante v_texte &&
b_courante == b_texte )
{
setTimeout('faire_disparaitre()', pause)
return
}
else
{
if( r_courante < r_texte ) { r_courante++ }
if( v_courante < v_texte ) { v_courante++ }
if( b_courante < b_texte ) { b_courante++ }

if( r_courante > r_texte ) { r_courante-- }
if( v_courante > v_texte ) { v_courante-- }
if( b_courante > b_texte ) { b_courante-- }

document.getElementById('conteneur').style.color = 'rgb(' +
r_courante + ',' + v_courante + ',' + b_courante + ')'
}

setTimeout(' faire_apparaitre()', delai)

}

function faire_disparaitre()
{
if(r_courante r_fond && v_courante v_fond && b_courante
b_fond)
{
alert(' Action suivante !')
return
}
else
{
if( r_courante < r_fond ) { r_courante++ }
if( v_courante < v_fond ) { v_courante++ }
if( b_courante < b_fond ) { b_courante++ }

if( r_courante > r_fond ) { r_courante-- }
if( v_courante > v_fond ) { v_courante-- }
if( b_courante > b_fond ) { b_courante-- }

document.getElementById('conteneur').style.color = 'rgb(' +
r_courante + ',' + v_courante + ',' + b_courante + ')'
}

setTimeout(' faire_disparaitre()', delai)

}

faire_apparaitre()

</script>.

Si tu as envie de me faire des commentaires sur ce dernier
script, ils seront les bienvenus.

Dans mon script d'origine, j'entrais la valeur de la durée
totale : cela me parait plus elegant que
d'entrer le délai, mais ce dernier script est deja bien.

Éventuellement, si j'ai du temps, j'essayerai de trouver une
fonction acceptant en entrée la durée totale du processus : ça
permettrait de proportionnaliser les décalages au décalage
restant a effectuer.

L'ideal, ce serait de pouvoir passer
directement les couleurs du fond et du texte a la fonction,
mais ça, c'est une autre histoire.

Si tu as envie de me faire des suggestions...

Merci encore, bultez.

Dominique
0
Rejoignez-nous