[JS] fondu de couleur de background d'une div

fondu de couleur de background d'une div [JS] - HTML/CSS - Programmation

Marsh Posté le 11-06-2008 à 15:54:54    

Bonjour, j'ai cherché, recherché, re recherché...
 
Beaucoup posent des question similaires, mais je n'ai pas trouvé mon bonheur :
Je souhaite faire un fondu de couleur dans le background d'une div en Javascript.
 
Pourquoi pas avec un gif animé ? Me direz-vous. J'ai essayé, et le résultat n'est pas le même sous IE et FF (fluidité)
 
et cet effet, je sais qu'il existe, puisque on peut le trouver à cette adresse :
 
https://auth.univ-nancy2.fr/login?s [...] 2.fr/Login
 
cliquez sur "Valider" sans remplir les champs, et oh miracle ! une div avec un fondu, exactement ce que je veux !
 
Vous me direz encore, pourquoi t'as pas recopié le script qui se trouve ici ? Et bien parce que je ne comprends pas trop le fonctionnement, 2-3 fonctions sont nécessaires, mais je n'arrive pas à les mettre en oeuvre :
 

Code :
  1. // transition effect to fade background of element from darker to lighter color
  2. // could use var redBackground = new initArray(12);redBackground[0]="#33CC00"; format
  3. function setbgColor(elId, r, g, b){
  4.     getRef(elId).style.backgroundColor = "rgb("+r+","+g+","+b+" )";
  5. }
  6. function fade(elId, sr, sg, sb, er, eg, eb, step, current, speed){
  7.     // printfire("----- START fade()" );
  8.     if (current <= step){
  9.         setbgColor(elId,Math.floor(sr * ((step-current)/step) + er * (current/step)),Math.floor(sg * ((step-current)/step) + eg * (current/step)),Math.floor(sb * ((step-current)/step) + eb * (current/step)));
  10.         current++;
  11.         setTimeout("fade('"+elId+"',"+sr+","+sg+","+sb+","+er+","+eg+","+eb+","+step+","+current+","+speed+" )",parseInt(speed));
  12.     }
  13.     // printfire("----- END fade()" );
  14. }
  15. function fadeIn(){
  16.     if(!W3C_DOM)return;
  17.     if(getRef('msg')) fade('msg', 51,204,0, 221,255,170, 30,1,20);
  18.     if(getRef('status')) fade('status', 187,0,0, 255,238,221, 30,1,20);
  19.    
  20.     var arrayElements = getElementsByAttribute("tr", "class", "added" );
  21.    
  22.     if (arrayElements.length > 0) {
  23.         fade(arrayElements[0].id, 255,255,51, 255,255,255, 30, 1, 70)
  24.     }
  25. }
  26. addLoadEvent(fadeIn);


 
quelqu'un peux-t'il m'aider à mettre en oeuvre ce script, où à me donner des pistes pour que je puisse en réaliser un plus simple ?
 
Merci d'avance, et longue vie au forum !


Message édité par slayer542 le 12-06-2008 à 11:55:35
Reply

Marsh Posté le 11-06-2008 à 15:54:54   

Reply

Marsh Posté le 12-06-2008 à 18:10:57    

ouch c est degueu comme code
normalement ca tient en une seule fonction

 

comme je m ennuyais un peu je t ai codé un truc vite fait
pour la personnalisation les cinq premieres lignes devraient suffire

 
Code :
  1. function fadeColors(id,startColor,stopColor,nbTrans,delay) {
  2.  
  3.     var elm = document.getElementById(id) || document.getElementById("fadingDiv" ); // l element qui doit etre dégradé
  4.     var delay = delay || 100; // en millisecondes c ets le temps qui passe entre chaque execution. a diminuer si la fluidité n est pas au rendez vous
  5.     var nbTrans = nbTrans || 20; // le nombre de transitions...a augmenter si ce n ets pas assez fluide
  6.     var startColor = startColor || [255,255,255]; // remplacer par les chiffres qui vont bien
  7.     var stopColor = stopColor || [99,0,0]; // pareil
  8.  
  9.     // maintenant il faut calculer le delta de chaque couleur
  10.     var rDelta = Math.floor((stopColor[0]-startColor[0])/nbTrans);
  11.     var gDelta = Math.floor((stopColor[1]-startColor[1])/nbTrans);
  12.     var bDelta = Math.floor((stopColor[2]-startColor[2])/nbTrans);
  13.  
  14.     // on cree les variables ou vont etre stockees les couleurs temporaires
  15.     var rTemp = startColor[0];
  16.     var gTemp = startColor[1];
  17.     var bTemp = startColor[2];
  18.  
  19.     // un petit setInterval pour que la fonction se repete d elle meme
  20.     var interval = setInterval(function() {
  21.         rTemp += rDelta;
  22.         gTemp += gDelta;
  23.         bTemp += bDelta;
  24.         elm.style.backgroundColor = "rgb("+rTemp+","+gTemp+","+bTemp+" )";
  25.         if (rTemp<0 || gTemp<0 || bTemp<0|| rTemp>255 || gTemp>255 || bTemp>255 ) {
  26.             clearInterval(interval);
  27.             elm.style.backgroundColor = "rgb("+stopColor[0]+","+stopColor[1]+","+stopColor[2]+" )";;
  28.         }
  29.     },delay);
  30.         
  31. }
 

tu peux la lancer de cette facon

Code :
  1. onload = function() {
  2.     fadeColors();
  3.     fadeColors("fadingDiv2",[46,241,32],[255,32,28]);
  4. };
 

id c ets l id du div en question


Message édité par mIRROR le 12-06-2008 à 18:52:48

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 20-06-2008 à 11:23:22    

aaaaah merci beaucoup de t'être penché sur le sujet ! je suis sur que ça va servir à pleins d'autres !
 
ça marche du tonnerre en plus !
 
merci encore !

Reply

Marsh Posté le 15-06-2009 à 14:13:15    

bonjour à tous,
génial ce script mais je ne sais pas l'intégrer ... je sais c'est la honte...
est ce que vous pourriez donner une exemple d'intégration dans une page html siouplé?
merci et à très vite i hope  
:)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed