Le code suivant permet de faire clignoter progressivement la couleur d'un texte, d'une couleur choisie à une autre.
J'ai créé cette source qui est entièrement configurable, et sa force réside dans le fait que les objets sont gérés complètement indépendament les uns des autres, et déclanchables sans difficulté en javascript.
Exemples d'utilisation ici :
http://vedlen.free.fr/fading-cs.html
Source / Exemple :
<script type="text/javascript">
//variables globales (ne pas toucher)
var fad_objets=Array();
var fad_millisec=Array();
var fad_curStep=Array();
var fad_hexDebut=Array();
var fad_hexFin=Array();
var fad_diff=Array();
var fad_loopFade=Array();
var fad_etapes = 15;
function Fading(ObjetCible, hexaDebut, hexaFin, nbMillisec, nbLoops)
{
var diffTmp = Array();
fad_objets.push(ObjetCible);
fad_curStep.push(1);
fad_hexDebut.push(hexaDebut);
fad_hexFin.push(hexaFin);
fad_millisec.push(nbMillisec/fad_etapes);
fad_loopFade.push(nbLoops);
for(i=0;i<3;i++)
diffTmp[i] = hexaFin[i] - hexaDebut[i];
fad_diff.push(diffTmp);
GoFading(fad_objets.length-1, 1);
}
function GoFading(ID, Sens)
{
var curHex = Array();
if(fad_curStep[ID] < fad_etapes)
{
if(Sens)
{
for(i=0;i<3;i++)
curHex[i] = fad_hexDebut[ID][i] + Math.round(fad_diff[ID][i]/fad_etapes*fad_curStep[ID]);
} else {
for(i=0;i<3;i++)
curHex[i] = fad_hexFin[ID][i] - Math.round(fad_diff[ID][i]/fad_etapes*fad_curStep[ID]);
}
fad_objets[ID].style.color="rgb("+curHex[0]+","+curHex[1]+","+curHex[2]+")";
fad_curStep[ID]++;
setTimeout( function() { GoFading(ID,Sens) },fad_millisec[ID]);
}
else
{
fad_curStep[ID]=1;
if(Sens)
{
fad_objets[ID].style.color="rgb("+fad_hexFin[ID][0]+","+fad_hexFin[ID][1]+","+fad_hexFin[ID][2]+")";
if(fad_loopFade[ID] != null)
GoFading(ID, 0);
} else {
fad_objets[ID].style.color="rgb("+fad_hexDebut[ID][0]+","+fad_hexDebut[ID][1]+","+fad_hexDebut[ID][2]+")";
if(fad_loopFade[ID]-1)
fad_loopFade[ID]--;
else return;
GoFading(ID, 1);
}
}
}
//prototype de la fonction :
/*
Fading(ObjetCible, hexaDebut, hexaFin, nbMillisec, nbLoops)
ObjetCible : objet DHTML sur lequel vous souhaiter effectuer un fading (div, span, a, ...)
hexDebut : tableau devant contenir les couleurs de base en RGB
hexFin : tableau devant contenir les couleurs de fin en RGB
nbMillisec : le diminuer (interval du timer) signifie augmenter la vitesse de l'animation (mais le script est aussi plus gourmant en CPU).
nbLoops : nombre d' "allers-retours" de fading. 0 = infini, null = juste un "aller". (essayez par vous-même pour plus de clareté :P)
Vous pouvez régler la fluidité du fading en augmentant nbMillisec.
Les paramètres par défaut que je vous fournis ont un rapport qualité/performance qui est, je pense, raisonnable.
Il se peut qu'il y ait certains lags suivant la configuration de la machine cliente, ou si vous lancez plein de fadings simultanément.
Mais dans 99,9% des cas c'est fluide :)
</script>
Conclusion :
Exemples d'utilisation ici :
http://vedlen.free.fr/fading-cs.html
Commentaires (s'ils sont construits) et notes sont les bienvenus :)
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.