|
Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
FADING OBJETS HTML
Information sur la source
Description
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
- <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>
<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 :)
Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
Télécharger le zip
Historique
- 01 septembre 2008 16:48:32 :
- -orth
- 02 septembre 2008 10:48:09 :
- - fusion de 2 fonctions en 1
- ajout de préfixes aux variables
- 05 septembre 2008 22:22:28 :
- - code
- 09 septembre 2008 09:19:58 :
- - code
Sources de la même categorie
Sources en rapport avec celle ci
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Besoin d'aide avec une fausse popup avec effet de transparence [ par cossette ]
Bon moi jaurais besoin daide pour installer cette fausse popup avec effet de transparence --> http://www.javascriptfr.com/code.aspx?ID=41941sur mon
effet de fading [ par spookyz ]
Bonjour je voudrais savoir si il est possible et comment faire (je suis debutant ) pour avoir un effet de fading sur la couleur de fond d'un menu et s
effet lightbox dans joomla ! Besoin d'aide ! Urgent ! [ par Cuenod ]
Salut à tous,je cherche a inserer un effet lightbox2.0 dans un article sous joomla 1.0.15, http://www.huddletogether.com/projects/lightbox2/mais la ca
Gèrer la transparence [ par nicomilville ]
Salut,Je suis en train de faire une fonction pour gèrer une boite de dialogue personalisé, et je suis tombé sur un problème, pour gèrer la transparenc
Comment faire le même effet que sur javascriptfr [ par Jarod1980 ]
Bonjour,Je suis à la recherche d'un script me permettant de faire le même effet que sur javascriptfr lorsque l'on clique sur deconnexion l'arrière pla
Problème avec effet lightbox + menu déroulant javascript [ par kevinbp ]
Bonjour,j'aurais aimé avoir de l'aide avec mon site internet. Je n'arrive pas à avoir sur la même page un effet de lightbox ajouté à une animation fla
jQuerry Cycle Plugin [ par JackNUMBER ]
bonjour à tous :) j'ai mis en place sur un site que j'ai créé un petit diaporama (plugin Clycle pour jQuerry) avec fondu entre les images
effet drapeau [ par mojchris ]
J'ais récupérer le script effet drapeau de PetoleTeam par contre sur lapage d'exemple il faut cliquer sur un lien pour que l'image apparaisse alors qu
PNG perd sa transparence sous IE6 [ par ju0123456789 ]
Bonjour à vous !Quelq'un peut-il m'aider svp ?Je met des images en PNG24 avec un fond transparent (aux chiottes les GIF !! lol), mais quand on a IE6 o
transparance selective dans tableau HTML [ par ju0123456789 ]
Bonjour,J'ai mis une image de fond que j'ai moi-même créée sous photoshop, pour moi elle déchire, mais le souci c'est que comme elel est multicolore,
|
Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
|