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
[ASTUCE] PATCH POUR MICROSOFT FORUMS NNTP BRIDGE V1[ASTUCE] PATCH POUR MICROSOFT FORUMS NNTP BRIDGE V1 par pierre
Si vous avez téléchargé comme moi Microsoft Forums NNTP Bridge V1 avant le 11 mars 2010 (voir [Astuce] Disponibilité de Microsoft Forum NNTP Bridge Version 1.0), un problème de date localisée pour les non anglais était présent. Un patch est disponibl...
Cliquez pour lire la suite de l'article par pierre PB LORS DE L'INSTALLATION SHAREPOINT 2010.PB LORS DE L'INSTALLATION SHAREPOINT 2010. par Patrick Guimonet
Lors de l'installation de SharePoint 2010, j'ai rencontré un problème de plantage à l'étape 5 du configuration Wizard. Ca se termine sur cet écran : Et en analysant le fichier de journalisation, on remarque vers la fin des 15000 et quelques lign...
Cliquez pour lire la suite de l'article par Patrick Guimonet [WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (2/2)[WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (2/2) par JeremyJeanson
Après mon précédent article qui attaque les contraintes par la fasse Nord de l'Everest. passons à la seconde possibilité offerte par WF4 pour valider une activité : la metadata . Je vous en ai déjà toucher un ou deux mots. La metadata dans WF4 est un élém...
Cliquez pour lire la suite de l'article par JeremyJeanson [WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (1/2)[WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (1/2) par JeremyJeanson
De WF3 à WF4 pas mal de choses on été changées pour faciliter la vie des développeurs, mais certain points peuvent sembler obscures. comme les contraintes. Pour vous guider, je me lance dans une série de deux articles. Ils présenterons deux approches poss...
Cliquez pour lire la suite de l'article par JeremyJeanson [ASP.NET] NE PAS SE FAIRE AVOIR PAR IHTTPMODULE ET SA MéTHODE INIT()[ASP.NET] NE PAS SE FAIRE AVOIR PAR IHTTPMODULE ET SA MéTHODE INIT() par tja
Beaucoup de développeurs pensent que lorsqu'on créé et enregistre un IHttpModule, il n'en existe qu'une seule instance et la méthode Init() sera appelée qu'une fois.
C'est faux
Cela peut vraiment créer des bugs subtils dont en ne se rend pas compte ...
Cliquez pour lire la suite de l'article par tja
Logiciels
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods Konvertor (4.00)KONVERTOR (4.00)Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format... Cliquez pour télécharger Konvertor
|