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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [JS] fondu de couleur de background d'une div

slayer542

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 :

// transition effect to fade background of element from darker to lighter color
// could use var redBackground = new initArray(12);redBackground[0]="#33CC00"; format
function setbgColor(elId, r, g, b){
getRef(elId).style.backgroundColor = "rgb("+r+","+g+","+b+" )";
}
function fade(elId, sr, sg, sb, er, eg, eb, step, current, speed){
// printfire("----- START fade()" );
if (current <= step){
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)));
current++;
setTimeout("fade('"+elId+"',"+sr+","+sg+","+sb+","+er+","+eg+","+eb+","+step+","+current+","+speed+" )",parseInt(speed));
}
// printfire("----- END fade()" );
}
function fadeIn(){
if(!W3C_DOM)return;
if(getRef('msg')) fade('msg', 51,204,0, 221,255,170, 30,1,20);
if(getRef('status')) fade('status', 187,0,0, 255,238,221, 30,1,20);
var arrayElements = getElementsByAttribute("tr", "class", "added" );
if (arrayElements.length > 0) {
fade(arrayElements[0].id, 255,255,51, 255,255,255, 30, 1, 70)
}
}
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

Publicité

mIRROR

Chevreuillobolchévik

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 :

function fadeColors(id,startColor,stopColor,nbTrans,delay) {
 
    var elm = document.getElementById(id) || document.getElementById("fadingDiv" ); // l element qui doit etre dégradé
    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
    var nbTrans = nbTrans || 20; // le nombre de transitions...a augmenter si ce n ets pas assez fluide
    var startColor = startColor || [255,255,255]; // remplacer par les chiffres qui vont bien
    var stopColor = stopColor || [99,0,0]; // pareil
 
    // maintenant il faut calculer le delta de chaque couleur
    var rDelta = Math.floor((stopColor[0]-startColor[0])/nbTrans);
    var gDelta = Math.floor((stopColor[1]-startColor[1])/nbTrans);
    var bDelta = Math.floor((stopColor[2]-startColor[2])/nbTrans);
 
    // on cree les variables ou vont etre stockees les couleurs temporaires
    var rTemp = startColor[0];
    var gTemp = startColor[1];
    var bTemp = startColor[2];
 
    // un petit setInterval pour que la fonction se repete d elle meme
    var interval = setInterval(function() {
        rTemp += rDelta;
        gTemp += gDelta;
        bTemp += bDelta;
        elm.style.backgroundColor = "rgb("+rTemp+","+gTemp+","+bTemp+" )";
        if (rTemp<0 || gTemp<0 || bTemp<0|| rTemp>255 || gTemp>255 || bTemp>255 ) {
            clearInterval(interval);
            elm.style.backgroundColor = "rgb("+stopColor[0]+","+stopColor[1]+","+stopColor[2]+" )";;
        }
    },delay);
        
}

tu peux la lancer de cette facon

Code :

onload = function() {
    fadeColors();
    fadeColors("fadingDiv2",[46,241,32],[255,32,28]);
};

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

slayer542

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 !

webamster01

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[JS]Sélectionner feuille de style + script selon la résolution	forcer la couleur des liens
Séléctionner couleur graphique Excel	Form en variable JS
[JS/Ajax/Prototype] Problème de transmission de variables et paramètre	Assigner à une variable JS le contenu d'un champ
Chargement fichier externe JS ?	[Ajax/JS] Comment faire cela ?
Passage de paramètre URL en JS (Novice)	[JSP/Html/JS] Champs obligatoires dans un formulaire
Plus de sujets relatifs à : [JS] fondu de couleur de background d'une div

Page générée en 0.060 secondes