Accueil > > > FADING OBJETS HTML
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
Commentaire s (s'ils sont construits) et notes sont les bienvenus :)
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
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 fade in sur des images/liens [ par piregproduction ]
Bonjour, Pour le centre d'un menu, je souhaite appellé via une frame une page dans laquelle j'aurais les images/liens de mon menu central, et je souha
Comment réaliser un effet de flocons [ par venus777 ]
Bonjour, Je souhaite faire un effet de neige qui tombe sur mon site internet mais je ne sais pas du tout comment faire, est-ce que quelqu'un peut m'a
texte à faire clignoter [ par odysseum13 ]
Bonjour, Je suis nouveau sur ce forum et grand débutant. Voici le script du texte que je voudrais faire clignoter. Ignorant en la matière, un peu d'ai
Ouvrir une image à partir d'une zone cliquable avec un effet de zoom? [ par bahh66 ]
Bonjour, je pose cette question ici mais je ne suis pas sur d'être au bon endroit... Je dois réaliser un cd-rom pour une présentation de musée. J'ai
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
|
Derniers Blogs
[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Arnault Nouvel et Antoine Dongois Le processus à prendre : Apprendre (découvrir la plateforme) Préparer (documenter l'historique et choisir la méthode de MAJ) Test (Test de MAJ) Implémenter (Effectuer la MAJ) Valid...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOURTECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOUR par ROMELARD Fabrice
Après un retour sur l'histoire des TechDays de Paris et le fait que ce soit le plus gros event MS au monde (du fait de sa gratuité), le président de MS France (Eric Boustoullier) a fait une présentation de la vision Microsoft pour les années à venir...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|