begin process at 2010 03 13 00:21:08
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > FADING OBJETS HTML

FADING OBJETS HTML


 Information sur la source

Note :
5 / 10 - par 1 personne
5,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :fading, fade, effet, transparence, clignoter Niveau :Initié Date de création :01/09/2008 Date de mise à jour :09/09/2008 09:19:58 Vu / téléchargé :4 566 / 184

Auteur : Vedlen

Ecrire un message privé
Commentaire sur cette source (14)
Ajouter un commentaire et/ou une note

 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 :)

 Fichier Zip

Les Membres Club peuvent 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

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

 Sources en rapport avec celle ci

Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip CHANGEMENT DE COULEUR SUR CARTE DE FRANCE par librepierre
Source avec Zip MOOTOOLS FUNCTION par BEDA91IT
Source avec Zip SESAME OUVRE TOI par kazma
Source avec Zip Source avec une capture EFFET DE CASCADE SUR DES IMAGES AVEC TRANSPARENCE... par adelami

Commentaires et avis

Commentaire de XtremDuke le 01/09/2008 18:15:10

Quelques remarques :

- Tu as deux fonctions (Fading1() et Fading2()) qui sont pratiquement identiques. Je penses que tu peux aisément les fusionner.
- On doit spécifier le nombre d'étapes... Tu peux deviner le nombre d'étapes en fonction de la durée d'animation voulue et le framerate.
- Tu aurais pu ajouter une fonction qui te récupère la couleur actuelle de l'objet ce qui t'aurait permis, en outre, de pouvoir faire des rollover avec ton effet sans que celà affiche des disfonctionnements.

Commentaire de Vedlen le 01/09/2008 19:28:42

"- Tu as deux fonctions (Fading1() et Fading2()) qui sont pratiquement identiques. Je penses que tu peux aisément les fusionner."
C'est vrai j'aurai pu les fusionner, mais je manquais de temps :) ça fera l'objet d'une mise à jour

"- On doit spécifier le nombre d'étapes... Tu peux deviner le nombre d'étapes en fonction de la durée d'animation voulue et le framerate."
Oui c'est vrai que ça pourrait être un peu plus ergonomique, encore une fois je verrai pour une prochaine mise à jour

"- Tu aurais pu ajouter une fonction qui te récupère la couleur actuelle de l'objet ce qui t'aurait permis, en outre, de pouvoir faire des rollover avec ton effet sans que celà affiche des disfonctionnements."
Je n'ai pas prévu de pousser la fonction jusque là, le but premier n'étant pas exclusivement réservé aux liens et à leur rollover. Si certains veulent en faire usage de ce cas là, alors ils peuvent adapter la fonction que je propose à leurs besoins :)
A ce moment là j'aurai pu aussi intégrer les nodes pour une encore meilleure compatibilité. Mais j'ai essayé de faire à la fois efficace, et surtout sans superflu (pour des gains de performance ainsi que de lisibilité).

Merci de tes remarques en tous cas.

Commentaire de Kimjoa le 01/09/2008 21:57:40 5/10

salut j'ai essayé ton script, ca marche bien, une source aurait été mieux quand meme.
J'ai posté un script d'animation tu peux faire la même chose avec plein d'option. Ce qui aurait été bien c'est que toute les lettres ne commence pas en même temps,en récupérant les n½uds texte de l'élément, remplacer les lettres par des spans le tout stocké dans un tableau que tu boucle ensuite.
Concernant le code au lieux de déclarer des variables  globale,il aurait mieux value faire une class surtout que tu poste en initié.
Tu utilises setTimeout pour faire le calcule des transitions des couleurs , il existe une fonction plus approprié , setInterval qui appelle une fonction de manière répétée, avec un certain délai fixé entre chaque appel.
Ton script n'est pas assé générique,je suis d'accord avec XtremDuke pour le rollover.
Tu as le mérite d'avoir posté et c'est deja cool de partagé ton travaille.
je t'invite a télécharger mon script  BYE

Commentaire de Vedlen le 01/09/2008 22:08:44

"une source aurait été mieux quand meme."
un zip tu veux dire ? Inutile... Un simple copier/coller suffit.. Ou alors visualiser la source de la page d'exemples.

"Ce qui aurait été bien c'est que toute les lettres ne commence pas en même temps,en récupérant les n½uds texte de l'élément, remplacer les lettres par des spans le tout stocké dans un tableau que tu boucle ensuite."
Trop gadget à mon goût ; trop de gadget tue le gadget :)

"il aurait mieux value faire une class"
c'est sur quoi je m'étais orienté dès le début mais il se trouve que c'était au final moins pratique à utiliser

"Tu utilises setTimeout pour faire le calcule des transitions des couleurs , il existe une fonction plus approprié , setInterval qui appelle une fonction de manière répétée, avec un certain délai fixé entre chaque appel."
Effectivement, mais le timer n'est pas utilisé indéfiniment c'est pour cela que j'ai opté pour un setTimeout (qui opère au final exactement de la même façon de toutes manières).

"Ton script n'est pas assé générique"
je ne vois pas pourquoi tu dis ça, c'est justement le plus générique dans sa catégorie. Après il faut je pense à un moment faire la limite entre le côté sympa et le côté trop gadget.

"je t'invite a télécharger mon script"
je veux bien le voir, mais quelle est l'adresse ou l'ID du code ?

Commentaire de Kimjoa le 01/09/2008 22:33:26

l'addresse de mon code est : http://www.javascriptfr.com/codes/DYNAMIQUE-JS-FAIRE-JOLIE-ANIMATION_47712.aspx

Ton code est le plus générique dans sa catégorie.
Bon on dois pas avoir la meme definition du mot.

Une class aurait été moins pratique a l'usage.
Et bien enplus de tes trois fonction qui aurait pu n'en faire qu une , il y a aussi 8 variables globales donc 8 mot reservé pour ton code, pour une page  simple ca pause pas de probleme mais...
deplus a part l'usage du mot clé new devant la fonction je vois pas ce qui a de plus fastidieux dans l utilisation de class

Tros de gadget tue le gadget. Imagine que je veuille faire cette effet (celui que je tes proposé), je devrais refaire un code preque similiare , ou adapter le tien , et le rendre par la meme ocasion plus générique!!

setIntervel possède une fonction pour arrête l'exécution  clearInterval().
De plus même si l'effet et le meme je pense avoir compris que tu rechercher d'abord l'efficacité, et ca t'économiserait un appel de fonction. En plus c'est fait pour ca.

concernant le copié collé, tu n'a donné que la fonction sans exemple, de plus , la copie ici ajoute a chaque ligne des dièse qu il faut supprimer ensuite.

bye

Commentaire de Vedlen le 02/09/2008 09:54:37

"Bon on dois pas avoir la meme definition du mot."
Ce que j'appelle générique est la facilité d'intégration du code

"Et bien enplus de tes trois fonction qui aurait pu n'en faire qu une , il y a aussi 8 variables globales donc 8 mot reservé pour ton code, pour une page  simple ca pause pas de probleme mais..."
J'aurai pu effectivement concentrer 2 fonctions en 1, mais peut être pas les 3 en une. Le but étant de faire un code clair et non pas une course à la réduction de caractère.
Pour ce qui est des variables globales, rien n'empêche de créer un préfixe pour être sûr d'éviter tout conflit avec du code extérieur.

"De plus a part l'usage du mot clé new devant la fonction je vois pas ce qui a de plus fastidieux dans l utilisation de class"
Voilà, le problème est justement là. Je voulais éviter un déclanchement en 2 temps. En utilisant directement une fonction, pas de déclaration de type à faire.

"Imagine que je veuille faire cette effet (celui que je tes proposé), je devrais refaire un code preque similiare , ou adapter le tien"
Je propose un concept de base qui fonctionne, après ce que tu proposes ça commence à faire partie des cas particuliers. Je mets à disposition un code de base, ensuite c'est à chacun de le faire évoluer pour ses propres besoins. J'évite ainsi tout ce que je considère comme superflu.

"concernant le copié collé, tu n'a donné que la fonction sans exemple, de plus , la copie ici ajoute a chaque ligne des dièse qu il faut supprimer ensuite."

Non j'ai spécifié à deux reprises un lien d'exemple : http://vedlen.free.fr/fading-cs.html

Commentaire de nickadele le 04/09/2008 21:00:38 administrateur CS

Velden, cela ne te coute rien de placer un exemple de l'utilisation.
Dans quelques temps ton lien n'existeras peut-être plus, donc plus de possibilité d'avoir un exemple d'utilisation.

D'avance merci de ta collaboration.

Commentaire de coucou747 le 05/09/2008 08:57:46

j'ai rien de particulier a dire sur l'utilite de la source, ou la qualite de l'animation, elle a l'air de bien remplire ses fonctions, j'aimerais juste ajouter deux trois mots sur la qualite du code :

setTimeout("GoFading("+ID+","+Sens+")",fad_millisec);

pourquoi ne pas utiliser une fonction ? (une lambda)

sinon, les variables globales, c'est moche... et tu aurais pu t'en passer.

Commentaire de Vedlen le 05/09/2008 10:15:28

"cela ne te coute rien de placer un exemple de l'utilisation."
J'uploaderai un zip avec le fichier HTML lors d'une prochaine màj

"pourquoi ne pas utiliser une fonction ?"
Comment ça ? Qu'est-ce que tu suggères ? Si tu fais allusion à setInterval ça a déjà été discuté ci-dessus, mais j'ai retenu setTimeout en choix personnel (niveau perf c'est équivalent)

"sinon, les variables globales, c'est moche... et tu aurais pu t'en passer."
Non je ne pouvais pas m'en passer car tous les paramètres sont indépendant les uns des autres à chaque appel de la fonction. A la limite utiliser un seul tableau multidimensionnel, mais c'est la misère à coder ensuite vu qu'il y a déjà des tableaux multidimensionnels.

Commentaire de coucou747 le 05/09/2008 10:30:42

mettre une lambda, c'est :
remplacer : setTimeout("GoFading("+ID+","+Sens+")",fad_millisec);
par : setTimeout(function(){ GoFading( ID, Sens) },fad_millisec);

ca te fait un code carement plus propre, et ca t'evite les bugs (dans les cas ou tu veux passer une chaine qui contient ", ta methode peut planter...)

et sinon, tu aurais pu utiliser un namespace, ca t'aurait evite d'avoir des globales (ok c'est un hack pas terrible, mais c'est deja mieux que d'avoir des globales) ou alors, tout passer en parametres.

Commentaire de Vedlen le 05/09/2008 10:45:42

ah ok je ne savais pas que ça portait ce nom la. Ceci dit les paramètres qui sont passés ne sont que des entiers donc pas de risque de bug.

Pour le namespace, quoi qu'il en soit il faut quand même des variables. Elles sont juste déclarées au sein du namespace ou de fonctions, et non pas en "liberté" dans le code brut. C'est peut être un petit peu plus clean au niveau global, ok, mais bon.

Tout passer en paramètre je crois que ça rend un code encore plus dégueulasse que les variables globales :P

Commentaire de cosycorner le 08/09/2008 10:22:51

bonjour;
J'ai utilisé ton script. Merci de partager ta source :)

Mais il ne marche pas avec un lien; je ne sais pas si mon code est mal agencé.

le voici :

<a href="javascript:void(0)" onmouseover="Fading(this, Array(100, 100, 100), Array(94, 187, 167), 25, 3);","javascript:void(window.open('site/index.html'))">Visitez mon portfolio ici</a></p>

Ya til une erreur de syntaxe ou le script est-il exclusif ?
Merci

Commentaire de Vedlen le 08/09/2008 10:26:22

Tu as une erreur de syntaxe javascript. Mets ça à la place :

<a href="javascript:void(0)" onmouseover="Fading(this, Array(100, 100, 100), Array(94, 187, 167), 25, 3);" onClick="window.open('site/index.html')">Visitez mon portfolio ici</a></p>

Tu as oublié le onClick

Commentaire de Vedlen le 08/09/2008 10:28:37

D'ailleurs je viens de me rendre compte que j'ai oublié de mettre à jour http://vedlen.free.fr/fading-cs.html lors de la dernière mise à jour :/ ce que je fais tout de suite

 Ajouter un commentaire


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 --&gt; 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


Nos sponsors


Appels d'offres

Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,546 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales