Recherche code html pour fondu ???

Recherche code html pour fondu ??? - HTML/CSS - Programmation

Marsh Posté le 31-07-2005 à 11:05:46    

Bonjour à tous , je cherche le code html pour un enchainement de deux images avec fondu comme ce site par exemple :
 
http://www.atlantic-etalages.fr/
 
 
Merci d'avance.

Reply

Marsh Posté le 31-07-2005 à 11:05:46   

Reply

Marsh Posté le 31-07-2005 à 11:08:58    

http://www.atlantic-etalages.fr/images/anigauche.gif
 
C'est pas du HTML, c'est un gif animé :o
 
goto graphisme :o


Message édité par elianor le 31-07-2005 à 11:09:15

---------------
JE JE SUIS LIBERTINEEEEEEEEEEE JE SUIS UNE CATINNNNNNNNN §§§§§§§§
Reply

Marsh Posté le 31-07-2005 à 16:29:04    

Salut!
 
Beaucoup de gens et webmasters -paresseux- font leurs pages web en Flash rien que pour faire un petit fondu entre deux images ou un horrible GIF animé limité à 256 couleurs, alors qu'en se cassant un peu la tête on peut y arriver en JavaScript. D'accord c'est plus de lignes de code, mais ça a le mérite de ne pas necessiter de plug-ins ou de programmes externes.
 
L'astuce consiste à faire une <table> ou un <div> et d'y mettre une image de fond, et par dessus une <img> normale ou un autre <div>, mais avec 0% d'opacité. Il suffit donc ensuite d'incrémenter en JavaScript la valeur de l'opacité de l'image et le tour est joué.
 
Le style "opacity" fait partie du CSS 2.1, qui n'est encore qu'une recommendation candidate, mais la plupart des navigateurs le supporte déjà.
Il y a bien évidemment des differences entre Mozilla et Internet Explorer pour pas changer, mais on peut mélanger les deux dans le même code.
Comme on va surtout jouer avec les styles, on va faire ça avec des <div>. Tout d'abord, la mise en place du code HTML dans le body:
 

Code :
  1. <div id="back">
  2.   <div id="front"></div>
  3. </div>


 
Simple, rapide, efficace :)
 
Maintenant le CSS, dans le <head> ou dans un fichier .css au choix, à éditer avec tes données d'images et tailles bien entendu.
 

Code :
  1. <style type="text/css">
  2.   <!--
  3.     #back {
  4.       background: url('img/gallery/hi/adif.jpg');
  5.       width: 500px;
  6.       height: 400px;
  7.       filter: alpha(opacity=100);
  8.       -moz-opacity: 1;
  9.       opacity: 1;
  10.     }
  12.     #front {
  13.       background: url('img/gallery/hi/bubbles.jpg');
  14.       width: 500px;
  15.       height: 400px;
  16.       filter: alpha(opacity=0);
  17.       -moz-opacity: 0;
  18.       opacity: 0;
  19.     }
  20.   -->
  21. </style>


 
On remarquera que filter: alpha(opacity=0); correspond à Internet Explorer et va de 0 (transparent) à 100 (opaque).
Quant à Mozilla et les autres navigateurs, on utilisera -moz-opacity et opacity, qui ont des valeurs comprises entre 0 et 1 (0.5 c'est à moitié transparent donc).
 
Place au JavaScript. Pour X raison, les valeurs du CSS ne sont pas passées au JavaScript, ne me demandes pas pourquoi (bug?). On aurai donc pu se passer du code CSS au dessus, puisque je vais tout redefinir maintenant, mais il faudra peut-être ajouter un position: absolute aux images si tu les veux à un endroit bien défini.
À mettre à la fin du <body>:
 

Code :
  1. <script type="text/javascript">
  2.   <!--
  4.     var fading;
  5.     var speed = 25;         // vitesse du fondu
  6.     var sleep = 2;          // pause entre chaque image, en secondes
  7.     image = new Array();
  8.     trans = new Array();
  10.                             // liste de tes images
  12.     image[0] = 'img/gallery/hi/adif.jpg';
  13.     image[1] = 'img/gallery/hi/bubbles.jpg';
  14.     image[2] = 'img/gallery/hi/x.jpg';
  16.     function fade_in(a, b) {
  17.       front = document.getElementById('front');
  19.       if (trans[b] < 100) {
  20.         trans[b] = trans[b] + 2;
  21.         if (document.all) { front.filters.alpha.opacity = trans[b]; }
  22.         front.style.MozOpacity = Math.min(parseFloat(front.style.MozOpacity) + 0.02, 0.99);
  23.         front.style.opacity = Math.min(parseFloat(front.style.opacity) + 0.02, 0.99);
  25.         if (trans[b] == 100) {
  26.           clearInterval(fading);
  28.           c = b + 1; if (!image[c]) { c = 0; }
  29.           setTimeout('fade_loop(' + b + ', ' + c + ')', sleep * 1000);
  30.         }
  31.       }
  32.     }
  34.     function fade_loop(a, b) {
  35.       if (fading) { clearInterval(fading); }
  37.       back = document.getElementById('back');
  38.       back.style.backgroundImage = 'url(' + '\'' + image[a] + '\'' + ')';
  40.       front = document.getElementById('front');
  41.       front.style.backgroundImage = 'url(' + '\'' + image[b] + '\'' + ')';
  43.       trans[a] = 0;
  44.       trans[b] = 0;
  46.       if (document.all) { front.filters.alpha.opacity = 0; }
  47.       front.style.MozOpacity = 0;
  48.       front.style.opacity = 0;
  50.       fading = setInterval('fade_in(' + a + ', ' + b + ')', speed);
  51.     }
  53.     setTimeout('fade_loop(0, 1)', sleep * 1000);
  55.   -->
  56. </script>


 
 
Et voilà!
J'espère que cet article sera utile.


Message édité par dotfx le 31-07-2005 à 16:40:28

---------------
www.renderfarm.online
Reply

Marsh Posté le 31-07-2005 à 22:18:40    

Un fondu en js ?
 
[:pingouino]


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 31-07-2005 à 22:27:13    

Ça ne fait pas longtemps que je suis inscrit sur ce forum, mais d'après ce que je vois, il y a tout un tas de personnes qui se dédient à poster uniquement des réponses tout à fait inutiles comme la tienne.
Si au moins tu développais un peu plus tes arguments... la conversation serait peut être plus utile.
 
Oui, un fondu en JavaScript, c'est ce que fabienpsx2 demandait... Sinon il aurai posté sa question dans le forum Graphisme ou Flash voire Java... Mais ici c'est HTML/CSS/JavaScript, exactement ce que j'ai utilisé pour illustrer l'exemple, donc je ne vois pas où est le problème.
Et s'il est plus facile pour lui de le faire en Flash, GIF animé ou Java, et bien ma réponse servira peut être à quelqu'un d'autre. Je trouve interessant de savoir reproduire tout ça en JavaScript pur car je ne vois pas l'interêt de concevoir une page web ou un effet des plus simples uniquement en Flash ou autres.


Message édité par dotfx le 31-07-2005 à 22:37:52

---------------
www.renderfarm.online
Reply

Marsh Posté le 31-07-2005 à 23:14:29    

Jvais me mettre aussi à critiquer si tu m'en veux pas :  
ton script fait 56 lignes alors que les 3/4 des lignes n'ont pas lieu d'être. et puis tu fais des trucs je vois pas trop l'interêt
mais sinon dans le principe c'est bon.
 
Ce que voulais dire plainsofpain c'est que le JS ne doit pas être utilisé pour faire des trucs de ce genre. Il n'a pas trop d'intérêt la dedans.
 
ET surtout, si le gars utilise un vieux navigateur, il ne verra pas l'effet, alors que en GIF animé ca pose pas de problème.


Message édité par gatsusat le 31-07-2005 à 23:17:01
Reply

Marsh Posté le 31-07-2005 à 23:26:11    

gatsusat, je prends ça comme une critique constructive et je t'en remercie.
 
Je suis tout à fait d'accord que le JS est lent et -presque- obsolète, et qu'un simple fondu peut/doit se faire avec d'autres méthodes comme Flash.
 
Maintenant, prenons l'exemple d'un client tétu, s'il veut une page web 100% (X)HTML/CSS/JavaScript compatible avec tous les navigateurs, et qu'il demande une galerie photo avec des zoooli fondu entre chaque image, il n'y a pas d'autre solution que d'utiliser les ressources qu'offre le JavaScript. Je suis déjà tombé sur des gens comme ça, qui refusent d'utiliser des plug-ins pour leur page web, aussi répandus soient-ils, et je les comprends.
Quant au code, je pense que les 56 lignes sont bel est bien nécessaires pour le fonctionnement du script (hors commentaires et sauts de lignes pour le formattage lisible).


Message édité par dotfx le 31-07-2005 à 23:29:02

---------------
www.renderfarm.online
Reply

Marsh Posté le 01-08-2005 à 09:05:54    

ben ton code je vais le critiquer un peu si tu ne m'en veux pas.
 
Pourquoi utiliser un tableau d'images alors que tu peux très bien laisser les images sur les DIV
Ensuite pourquoi cacher un des DIV pendant que l'autre s'affiche, alors qu'il te suffit juste de réafficher le div FRONT ou de la cacher, l'effet reste le même, sauf si bien sur tes images on de la transparence sur ELLES, mais bon, ca gache un peu tout alors.
 
ET pour en revenir au JS, le JS trop utilisé pourri le navigateur, je suis déjà tombé sur des sites ou les boulets ont truffés leur site de JS, résultat des courses : 50% du processeur utilisé par IE. erf

Reply

Marsh Posté le 01-08-2005 à 09:29:55    

Je vais développer ma réponse alors, si tu me le permets, dotfx.
 
Tu as 56 lignes de code, et elles sont surement nécessaires pour faire l'effet de fondu, mais ce n'est pas le nombre de lignes le problème, mais le script lui meme.
 
Il y a peu de temps, quelqu'un ayant une mise en page qui fonctionnait mal selon les résolutions prévoyait de faire un Javascript pour corriger sa page selon la résolution du visiteur ...
 
Hé bien ton effet de fondu est tout simplement aussi utile que le script de correction du code de la page selon la résolution.
 
Utiliser javascript comme tu le suggères pour faire une galerie photo avec des effets de fondu sur un site HTML/CSS/Javascript, c'est complètement décalé niveau accessibilité. Si une personne n'a pas javascript (désactivé pour éviter les sites qui redimensionnent la fenetre, donc tous les onglets sur firefox par exemple), elle fait comment pour voir tes images ?
 
En résumé ton code est bon, c'est le motif de l'usage du javascript qui me semble complètement étrange.
 
Si le client veut des trucs spécifiques comme des effets de fondu, tu lui expliques que le faire en javascript diminuerait l'accessibilité, le poids, et la vitesse d'affichage de sa page.  
 
Et si les visiteurs présumés du site ont une petite connexion, ils vont attendre beaucoup plus longtemps, uniquement pour un effet de fondu pas vraiment utile ...
 
Voila, ceci est mon avis. Après, tu en fais ce que tu veux ...


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 01-08-2005 à 10:15:59    

dotfx a écrit :

Comme on va surtout jouer avec les styles, on va faire ça avec des <div>. Tout d'abord, la mise en place du code HTML dans le body:
 

Code :
  1. <div id="back">
  2.   <div id="front"></div>
  3. </div>



Les <div> ne doient absolument pas figurer dans le code HTML ! Il faut mettre l'image à afficher si on n'a pas de JS. Après, les <div> doivent être insérées via le JS, mais surtout ne jamais mettre des trucs vides comme ça ;)

Reply

Marsh Posté le 01-08-2005 à 10:15:59   

Reply

Marsh Posté le 01-08-2005 à 10:16:46    

dotfx a écrit :

Je suis tout à fait d'accord que le JS est lent et -presque- obsolète, et qu'un simple fondu peut/doit se faire avec d'autres méthodes comme Flash.


Non, c'est pas lent ni obsolète. Faut juste savoir l'utiliser :)

Reply

Marsh Posté le 01-08-2005 à 10:22:03    

Bonjour dotfx,
 
Je ne peux que rejoindre mes estimés co-forumeurs dans leurs doutes quant à la pertinence du JS pour une telle animation.
 
Sans que j'ai à redire sur le principe, et sous les réserves déjà énoncées quant au code lui-même, je crains que cette solution soit encore moins souhaitable qu'un simple GIF animé ou qu'une animation Flash.
 
Il m'est souvent arrivé, sur des machines peu puissantes, de voir le CPU s'envoler lors de l'exécution du JS de certaines pages. Je crains que ce code puisse en faire partie.
 
J'imagine aussi, sans avoir fait de vérification, que des différences notoires risquent d'apparaître selon le browser/OS utilisé - d'expérience, plus un script devient complexe et fait appel à des notions avancées, plus les chances de le voir "mal" se comporter augmentent.
 
Enfin, d'un point de vue maintenance, c'est remplacer une opération purement graphique par du code, ce qui ne me semble pas judicieux.
 
Par contre, c'est une approche originale très intéressante.
 

Citation :

il y a tout un tas de personnes qui se dédient à poster uniquement des réponses tout à fait inutiles comme la tienne.


PoP n'a fait que marquer son étonnement, t'invitant à développer ta suggestion initiale. Il n'est pas rare de répondre par un simple pingouino sur cette partie du forum.
 
[:pingouino]


Message édité par sircam le 01-08-2005 à 10:22:58

---------------
Now Playing: {SYNTAX ERROR AT LINE 1210}
Reply

Marsh Posté le 01-08-2005 à 11:10:14    

Pingouino au pouvoir ? [:pingouino]


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 01-08-2005 à 11:21:28    

[:pingouino]
 
VERSUS
 
[:dawa]


---------------
Now Playing: {SYNTAX ERROR AT LINE 1210}
Reply

Marsh Posté le 01-08-2005 à 11:41:30    

[quotemsg=1166413,12,142751]Bonjour dotfx,
[...]
[quotemsg]
 
 
Je suis d'accord avec toi sur certains points. Mais pas d'accord sur des petites choses.
Par exemple : esox_ch devait faire un effet escalier sur du texte pour le site d'un client. Malheureusement on ne pouvait pas le faire comme on le veut, alors je lui ai fait un script JS qui met le texte en escalier.
là ca reste accessible car si le gars n'a pas JS, son texte reste normal. et avec le JS ca passe.
 
Pour l'effet de notre cher ami, ca peut poser prejudice, car si le mec qui visite le site n'a pas JS d'activé, ben il l'a un peu dans l'os dans un sens puisqu'il n'affiche aucune image dans son ca.
Le mieux serait de rajouter des éléments avec le JS, et à partir d'une image.

Reply

Marsh Posté le 01-08-2005 à 11:43:17    

gatsusat a écrit :


ET surtout, si le gars utilise un vieux navigateur, il ne verra pas l'effet, alors que en GIF animé ca pose pas de problème.


bah, où est le problème si on ne voit pas l'effet ? L'animation n'apporte rien de plus au contenu donc animation ou pas animation, le contenu ne change pas.
 
(par contre, c'est clair, faire un GIF, c'est surrement plus simple...)


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 01-08-2005 à 11:46:32    

Bah ouais, après tout, si tu ne vois pas l'animation, c'est tant mieux. [:pingouino]


---------------
Now Playing: {SYNTAX ERROR AT LINE 1210}
Reply

Marsh Posté le 01-08-2005 à 12:06:41    

Je suis tout à fait d'accord avec vous quant à l'utilisation du JavaScript pour ce genre d'effets et je ne remet rien en question. C'est faisable mais c'est pas fait pour, car c'est lent et fastidieux.
 
J'en reviens à la demande de l'auteur du post, qui voulait le code HTML pour un fondu entre chaque image. Il est évident qu'il vaut mieux lui recommander une autre méthode comme les GIF ou Flash, mais ce n'est pas ce qu'il demandait, à moins qu'il ne sache pas que c'est faisable en GIF/Flash.
 

FlorentG a écrit :

Les <div> ne doient absolument pas figurer dans le code HTML ! Il faut mettre l'image à afficher si on n'a pas de JS. Après, les <div> doivent être insérées via le JS, mais surtout ne jamais mettre des trucs vides comme ça ;)


 
C'est une méthode parmi d'autres, mais autant alléger le code JavaScript en insertant directement les <div> vides en HTML et compléter avec le CSS, je ne vois pas d'inconvénients, ça fait plus propre et c'est aussi efficace (CF cssZenGarden par exemple).
 
 
 


---------------
www.renderfarm.online
Reply

Marsh Posté le 01-08-2005 à 12:11:29    

dotfx a écrit :


C'est une méthode parmi d'autres, mais autant alléger le code JavaScript en insertant directement les <div> vides en HTML et compléter avec le CSS, je ne vois pas d'inconvénients, ça fait plus propre et c'est aussi efficace (CF cssZenGarden par exemple).


C'est sémantiquement incorecte


---------------
my flick r - Just Tab it !
Reply

Marsh Posté le 01-08-2005 à 12:35:12    

zapan666 a écrit :

C'est sémantiquement incorecte


 
Je ne peux pas confirmer, j'ai cherché dans les documents W3C et j'ai rien trouvé à ce propos.  
Le validator.w3.org ne dit rien également tant en HTML4 comme XHTML1.0 et 1.1 Strict.
Peut être faut-il y ajouter un simple &nbsp; ?


---------------
www.renderfarm.online
Reply

Marsh Posté le 01-08-2005 à 12:36:28    

dotfx a écrit :

Je ne peux pas confirmer, j'ai cherché dans les documents W3C et j'ai rien trouvé à ce propos.  
Le validator.w3.org ne dit rien également tant en HTML4 comme XHTML1.0 et 1.1 Strict.
Peut être faut-il y ajouter un simple &nbsp; ?


Non, le validator ne peut pas vérifier la sémantique du texte, lui ne valide que face à la DTD. Un <div> vide, par définition, c'est un div inutile, puisqu'il est vide. Vaut mieux le rajouter en JS et garder un code HTML propre.

Reply

Marsh Posté le 01-08-2005 à 13:07:40    

désolé de m'introduire dans la conversation mais j'arrive pas un faire le gif animé , je m'y connais pas trop dans le domaine du web , si quelqu'un aurait une astuce ou autre , merci pour vos réponses.

Reply

Marsh Posté le 01-08-2005 à 13:34:04    

Fabien > Tu auras plus de chance en faisant une recherche sur "graphisme". Ici, c'est rempli de barbus.
 
EDIT :   [:pingouino]


Message édité par sircam le 01-08-2005 à 13:34:14

---------------
Now Playing: {SYNTAX ERROR AT LINE 1210}
Reply

Marsh Posté le 01-08-2005 à 17:47:05    

sircam a écrit :

EDIT :   [:pingouino]


 
Tu aurais pu l'oublier ? [:pingouino]


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 01-08-2005 à 17:51:26    

Ca faisait tellement vide.
 
 
[:pingouino]


---------------
Now Playing: {SYNTAX ERROR AT LINE 1210}
Reply

Marsh Posté le 01-08-2005 à 17:55:09    

FlorentG a écrit :

Non, c'est pas lent ni obsolète. Faut juste savoir l'utiliser :)


Ah si, c'est fucking lent le JS, par contre c'est malheureusement pas obsolète...
 
Je donnerais cependant cher pour avoir un PythonScript (qui mériterait son nom) à la place du Javascript :whistle:  
 
C'est un projet qui peut poutrer d'ailleurs [:benou_miam]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 01-08-2005 à 18:04:52    

masklinn a écrit :

Ah si, c'est fucking lent le JS, par contre c'est malheureusement pas obsolète...
 
Je donnerais cependant cher pour avoir un PythonScript (qui mériterait son nom) à la place du Javascript :whistle:  
 
C'est un projet qui peut poutrer d'ailleurs [:benou_miam]


 
+1 !
 
Ca serait bonheur !


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 01-08-2005 à 18:06:42    

plainsofpain a écrit :

+1 !
 
Ca serait bonheur !


J'propose qu'on se lance dans une proof of concept sous forme d'extension Firefix qui hook dans l'interpréteur python :o :o :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 01-08-2005 à 18:23:12    

masklinn a écrit :

J'propose qu'on se lance dans une proof of concept sous forme d'extension Firefix qui hook dans l'interpréteur python :o :o :o


 
Ok. quand tu veux tu choises :)


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed