Recherche code html pour fondu ???

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Recherche code html pour fondu ???

fabienpsx2

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.

Publicité

elianor

bannie 17 fois

C'est pas du HTML, c'est un gif animé

goto graphisme

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

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

dotfx

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 :

<div id="back">
<div id="front"></div>
</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 :

<style type="text/css">
<!--
#back {
background: url('img/gallery/hi/adif.jpg');
width: 500px;
height: 400px;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
#front {
background: url('img/gallery/hi/bubbles.jpg');
width: 500px;
height: 400px;
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
-->
</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 :

<script type="text/javascript">
<!--
var fading;
var speed = 25; // vitesse du fondu
var sleep = 2; // pause entre chaque image, en secondes
image = new Array();
trans = new Array();
// liste de tes images
image[0] = 'img/gallery/hi/adif.jpg';
image[1] = 'img/gallery/hi/bubbles.jpg';
image[2] = 'img/gallery/hi/x.jpg';
function fade_in(a, b) {
front = document.getElementById('front');
if (trans[b] < 100) {
trans[b] = trans[b] + 2;
if (document.all) { front.filters.alpha.opacity = trans[b]; }
front.style.MozOpacity = Math.min(parseFloat(front.style.MozOpacity) + 0.02, 0.99);
front.style.opacity = Math.min(parseFloat(front.style.opacity) + 0.02, 0.99);
if (trans[b] == 100) {
clearInterval(fading);
c = b + 1; if (!image[c]) { c = 0; }
setTimeout('fade_loop(' + b + ', ' + c + ')', sleep * 1000);
}
}
}
function fade_loop(a, b) {
if (fading) { clearInterval(fading); }
back = document.getElementById('back');
back.style.backgroundImage = 'url(' + '\'' + image[a] + '\'' + ')';
front = document.getElementById('front');
front.style.backgroundImage = 'url(' + '\'' + image[b] + '\'' + ')';
trans[a] = 0;
trans[b] = 0;
if (document.all) { front.filters.alpha.opacity = 0; }
front.style.MozOpacity = 0;
front.style.opacity = 0;
fading = setInterval('fade_in(' + a + ', ' + b + ')', speed);
}
setTimeout('fade_loop(0, 1)', sleep * 1000);
-->
</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

plainsofpain

Pingouino's lover

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

dotfx

Ç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

gatsusat

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

dotfx

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

gatsusat

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

plainsofpain

Pingouino's lover

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

FlorentG

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 :

<div id="back">
<div id="front"></div>
</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

Publicité

FlorentG

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

sircam

I Like Trains

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}

plainsofpain

Pingouino's lover

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

sircam

I Like Trains

[:pingouino]

VERSUS

[:dawa]

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

gatsusat

[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.

zapan666

Tout est relatif

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 !

sircam

I Like Trains

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

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

dotfx

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 :

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

zapan666

Tout est relatif

dotfx a écrit :

C'est sémantiquement incorecte

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

dotfx

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   ?

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

FlorentG

dotfx a écrit :

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.

fabienpsx2

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.

sircam

I Like Trains

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}

plainsofpain

Pingouino's lover

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

sircam

I Like Trains

Ca faisait tellement vide.

[:pingouino]

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

masklinn

í dag viðrar vel til loftárása

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]

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r

plainsofpain

Pingouino's lover

masklinn a écrit :

+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

masklinn

í dag viðrar vel til loftárása

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

plainsofpain

Pingouino's lover

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

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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Recherche code html pour fondu ???

Sujets relatifs
probleme de mails dans html	[RESOLU] Recherche d'un string dans un tableau
[EMPLOI] Recherche Programmeur PHP / Graphiste	recherche développeur web!
[RESOLU]Retourner un code d'erreur dans une VbYesNo Box	moteur de recherche sous forme de menu déroulant
Forcer une recherche	recherche excel par pilotage access
comment enlever les balises html	gerer les erreurs en HTML
Plus de sujets relatifs à : Recherche code html pour fondu ???

Page générée en 0.082 secondes