Fondu enchainé [Sources]

**Bovino** · 20/02/2010, 15h41

Suite à cette discussion, je me suis amusé à réaliser un script assez simple de fondu enchainé.

Le fonctionnement est plutôt simple (enfin... je pense) : vous positionnez vos images les unes par-dessus les autres (dans l'exemple, en les positionnant en absolute) et vous lancez le script en passant en paramètre le nom de classe CSS des élément à enchainer.
Ensuite, le script modifie les propriétés z-index et d'opacité pour réaliser l'effet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
var Fondu = function(classe_img){
	this.classe_img = classe_img;
        this.courant = 0;
	this.coeff = 100;
	this.collection = this.getImages();
	this.collection[0].style.zIndex = 100;
	this.total = this.collection.length - 1;
	this.encours = false;
}
Fondu.prototype.getImages = function(){
	var tmp = [];
	if(document.getElementsByClassName){
		tmp = document.getElementsByClassName(this.classe_img);
	}
	else{
		var i=0;
		while(document.getElementsByTagName('*')[i]){
			if(document.getElementsByTagName('*')[i].className.indexOf(this.classe_img) > -1){
				tmp.push(document.getElementsByTagName('*')[i]);
			}
			i++;
		}
	}
	var j=tmp.length;
	while(j--){
		if(tmp[j].filters){
			tmp[j].style.width = tmp[j].style.width || tmp[j].offsetWidth+'px';
			tmp[j].style.filter = 'alpha(opacity=100)';
			tmp[j].opaque = tmp[j].filters[0];
			this.coeff = 1;
		}
		else{
			tmp[j].opaque = tmp[j].style;
		}
	}
	return tmp;
}
Fondu.prototype.change = function(sens){
	if(this.encours){
		return false;
	}
	var prevObj = this.collection[this.courant];
	this.encours = true;
	if(sens){
		this.courant++;
		if(this.courant>this.total){
			this.courant = 0;
		}
	}
	else{
		this.courant--;
		if(this.courant<0){
			this.courant = this.total;
		}
	}
	var nextObj = this.collection[this.courant];
	nextObj.style.zIndex = 50;
	var tmpOp = 100;
	var that = this;
	var timer = setInterval(function(){
		if(tmpOp<0){
			clearInterval(timer);
			timer = null;
			prevObj.opaque.opacity = 0;
			nextObj.style.zIndex = 100;
			prevObj.style.zIndex = 0;
			prevObj.opaque.opacity = 100 / that.coeff;
			that.encours = false;
		}
		else{
			prevObj.opaque.opacity = tmpOp / that.coeff;
			tmpOp -= 5;
		}
	}, 25);
}

Exemple en ligne

Je pense que beaucoup de choses peuvent être améliorées, mais j'avoue l'avoir codé assez rapidement, donc n'hésitez pas à proposer vos améliorations

**hornetbzz** · 21/02/2010, 00h25

Un autre, en moins bien, sauf peut-être le timeout non [EDIT] constant ... :
La transition est probablement moins fluide dans mon cas car je n'ai pas pensé à employer les z-index.
Mais bon, c'est quand même le principe qu'utilise JQuery.

testé sous FF3, Google Chrome et IE8

HTML: on commence avec une première image dans la balise <img>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img id="banniere" src="images/banniere1.png" alt="banniere" title="mon site de noob" style="-moz-opacity:100%; filter:alpha(opacity=100);" />'

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// ******************************************************
// Variables globales, Init
// ******************************************************
var b = new Array();
	b[0] = new Image(); b[0].src = "images/banniere1.png";
	b[1] = new Image(); b[1].src = "images/banniere2.png";
	b[2] = new Image(); b[2].src = "images/banniere3.png";
	b[3] = new Image(); b[3].src = "images/banniere4.png";
	b[4] = new Image(); b[4].src = "images/banniere5.png";
	b[5] = new Image(); b[5].src = "images/banniere6.png";
	b[6] = new Image(); b[6].src = "images/banniere7.png";
// Je sais j'aurais pu me fendre d'une boucle mais au départ je n'avais que 2 images

// On démarre sur l'image 0 puis au bout du premier timeout, on passe sur l'image 1
	var pic_number = 1;

// Changement d'image toutes les n secondes
	var pic_delay = 6000;


// ******************************************************
function $(id) {
// ******************************************************
var $ = document.getElementById(id);

$.fadeIn = function(delay,callbk,out) {
    var _this = this;
    for (i = 1; i <= 100; i++) {
      (function(j) {
            setTimeout(function()
			{  
                  if (out == true) j=100-j;
                  _this.style.opacity = j/100; // IE
                  _this.style.MozOpacity = j/100; // FF
                  _this.style.KhtmlOpacity = j/100; // Konq
                  _this.style.display="block"; 
                   if (j == 100 && callbk != undefined) {callbk.call(_this);}
                   else if (out == true && callbk != undefined && j == 0) {callbk.call(_this);}
                  _this.style.filter = "alpha(opacity=" + j + ");";	
			}, j*delay/100); // non linéaire
                 
        })(i);     
    }
};

$.fadeOut = function(delay,callbk) {
    $.fadeIn(delay,callbk,true);
};

return $;
}
	
// ******************************************************
function animation()
// ******************************************************
 {
	// Cas de n images alternatives contenues dans le tableau b
		if (pic_number > b.length - 1 ) pic_number = 0;

	// Récupère les infos de l'image en cours dans la balise <img> avec id = banniere
		var img_encours = document.getElementById("banniere");
		
	// Fade Out
		$("banniere").fadeOut(1000);

	// Attribution de la nouvelle source (affichage de la nouvelle image)
		img_encours.setAttribute("src", b[pic_number].src);
	
	// Fade In
		$("banniere").fadeIn(1000);

	// on passe à l'indice d'image suivante
		pic_number++;
	
	// Intervalle de n secondes entre chaque image
		window.setTimeout("animation()", pic_delay);
 }
 
 // Démarrage de l'animation au bout de n secondes
		window.setTimeout("animation()", pic_delay);

**kimjoa** · 21/02/2010, 14h31

salut bovino, script simple et efficace !!

Petite remarque quand même, l'utilisation de la class pour sélectionner les images pourrais être remplacé par une récupération des éléments enfant images d'un conteneur. -10 lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var prevObj = this.collection[this.courant];

A mettre après tous les return

Perso j'aurais fait 2 fonction next et previous et mit en privé une 3ème pour le traitement, rendant le tout plus simple l'utilisation.

Y'a aussi le problème de ie qui connait pas le style opacity !

Sinon hornetbzz, plusieurs chose me choque un peu dans ton script. Tu change la propriété src de l'image, mais tu ne prévoit aucun loader d'image (au début du script ces images ne seront pas chargé)
Puis t'es transitions linaires pause un problème. Tu lance un setimeout en espace de temps variables, ce qui est pas optimisé... rendre 150 frames par seconde sert a rien (sauf accélérer la transition) , il aurait mieux fallut utiliser un setInterval , et gérer l'accélération en fonction du temps passé et restant.
De plus le gros problème de ta solution et que tu dé-enregistre pas les setTimeout, même à un un interval de 0, ceux-ci continue d'être exécute.
Dommage, tes idées sont original, mais pas adapté.

bye

**hornetbzz** · 21/02/2010, 16h03

Le code n'est probablement pas au top car c'est du conglomérat de différentes époques, entre super noob et le noob actuel. Mais mon script fonctionne bien.

tu ne prévoit aucun loader d'image (au début du script ces images ne seront pas chargé)

euh, si, il y a la balise html en base dans le code, puis l'alternance des images est lancée ensuite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
// Démarrage de l'animation au bout de n secondes
		window.setTimeout("animation()", pic_delay);

De plus le gros problème de ta solution et que tu dé-enregistre pas les setTimeout, même à un un interval de 0, ceux-ci continue d'être exécute.

Là par contre ça m'intéresse, pourrais-tu peux préciser stp .. ?

**kimjoa** · 21/02/2010, 20h55

ok concernant les img, c'est vrai , mais elle sont déclarer a l'extérieur de ton script, c'est donc a l'utilisateur de le faire "manuellement", en html ou js. Hors en html si on utilise un domContentLoaded sur le document, les imgs ne seront pas charger lors de l'exécution du script. De même en js, le chargement ce fait de manière asynchrone, faudrait en faite vérifié a chaque fin de chargement des imgs si elle le sont toutes et lancer le script si oui.... Mais bon autant faire une autre source pour ca

Pour le timeout je me suis aussi planté

, j'ai écrit en speed, j'était pas chez moi , sans mon éditeur favorie dsl

Tu dit que ton timeout est non lineaire, tu entends koi par là ?

Penses pas me tromper cette fois ! mais tu déclares autant de timeout que de frame, passer par un setinterval consommera bcp moin de ressource.

bye

**hornetbzz** · 21/02/2010, 22h50

Ok, tu as aussi dû oublier le correcteur d'orthographe et tes lunettes

Le timeout linéaire (fonction affine de j) est en gras dans le source : j*delay/100

**kimjoa** · 22/02/2010, 00h28

bon apparemment tu tiens absolument pas comptes de mes remarques constructive, mais préfère me balancer mes erreurs, qu'elle soit orthographique (super, j'ai pas que ca a faire , que de relire tout mes msg, juste pour paraitre cultivé, mais toi tu en a assé pour le rapeller aux autres !! pas mal !!) ou celle de logique à là quels je me suis excusé(tu veux quoi d'autre?).

De plus met des lunettes aussi j'ai dit

Tu dit que ton timeout est non linéaire, tu entends koi par là ?

Comme quoi hein

**Bovino** · 22/02/2010, 13h44

Envoyé par kimjoa

salut bovino, script simple et efficace !!

Merci

Petite remarque quand même, l'utilisation de la class pour sélectionner les images pourrais être remplacé par une récupération des éléments enfant images d'un conteneur. -10 lignes

Oui, j'y avait pensé, mais finalement, je me suis dit que cette façon de procéder, bien que demandant plus de traitements était peut-être préférable, cela permet de placer les éléments n'importe où dans le code et d'utiliser cette classe CSS pour les positionner.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var prevObj = this.collection[this.courant];

A mettre après tous les return

Bien vu, c'est corrigé

Perso j'aurais fait 2 fonction next et previous et mit en privé une 3ème pour le traitement, rendant le tout plus simple l'utilisation.

Oui, effectivement, ce serait probablement plus adapté...

Y'a aussi le problème de ie qui connait pas le style opacity !

C'est bien pour cela que je différencie la propriété opaque en fonction de IE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if(tmp[j].filters){
	tmp[j].opaque = tmp[j].filters[0];
	this.coeff = 1;
}
else{
	tmp[j].opaque = tmp[j].style;
}

et dans tous les cas, opaque possède bien une propriété opacity

**kimjoa** · 22/02/2010, 18h08

C'est bien pour cela que je différencie la propriété opaque en fonction de IE
Code :

if(tmp[j].filters){
tmp[j].opaque = tmp[j].filters[0];
this.coeff = 1;
}
else{
tmp[j].opaque = tmp[j].style;
}

et dans tous les cas, opaque possède bien une propriété opacity

Ha ok

! Intéressant ta façon de procéder, je là met de coté pour plus tard !

**Auteur** · 25/02/2010, 18h49

Il ne reste plus à combiner ce script avec le script du miroir

**Coyote007** · 05/03/2010, 02h14

Bonjour! ce script m'intéresse beaucoup, je voudrais l'adapter pour créer une bannière qui change d'image toute seule (sans bouton) je me galère à chercher un code depuis 3 jours sans résultat. Pourriez vous m'aider svp ?
(je ne sais pas programmer, juste utiliser le code et encore...)

**Bovino** · 05/03/2010, 07h54

Il suffit de modifier le onload du body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="window.monFondu = new Fondu('images');setInterval(function(){monFondu.change(true);},3000);">

**Bovino** · 05/03/2010, 13h18

J'ai rajouté une option de défilement automatique dans la page d'exemple

**Coyote007** · 05/03/2010, 20h49

Merci pour la réponse ultra rapide ! ça ne fonctionne pas chez moi, j'ai déjà la balise body pleine de préloads d'images...
code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<body onload="MM_preloadImages('/images/chauf2.gif','/images/indus2.gif','/images/buro2.gif','/images/clim2.gif','/images/sani2.gif','/images/ref2.gif','/images/part2.gif','../images/actualites1.gif','../images/presentation.jpg','../images/devis.jpg','../images/contact.jpg','../images/promos.jpg','../images/actualites.jpg','../images/musicoff.jpg')">

au début, j'ai essayé les scripts de chez codes sources qui sont un peu plus compliqués (appel *.js) et j'ai vu vos codes que je trouve beaucoup plus simples, notamment pour l'appel de fichiers *.js (les vôtres sont dans la page html, plus facile pour un noob comme moi d'insérer la balise <script javascript>)=> j'ai bien sûr changé les appels d'images en fonction de leur situation par rapport aux dossiers de mon site...

Votre code me met les images les unes au dessous des autres, le fade-in/fade-out fonctionne quand même.

Je précise que je travaille sous dreamweaver et que je fais un site pour un copain... et surtout que je suis pas très doué pour encoder, mon dada c'est plutôt le graphisme, je dors avec photoshop sous l'oreiller...

**SpaceFrog** · 06/03/2010, 09h28

Il ne reste plus à combiner ce script avec le script du miroir

il suffit de mettre l'image est le reflet dans un même div et de lui appliquer le fondu enchainé... ( plat typiquement savoyard et masochiste )

**Coyote007** · 14/03/2010, 19h18

Bon, bah j'ai trouvé une solution, je me suis gratté les neurones et j'ai fait ma bannière sous flash, au final ça pèse pas lourd et c'est facile à insérer dans le code. Et puis qu'importe le flacon... j'ai obtenu le résultat escompté.

PS: Merci quand même !

**SpaceFrog** · 15/03/2010, 16h50

un simple point virgule suffisait

**Malanico** · 12/06/2010, 10h16

Bonjour,

je voudrais utiliser le script de Bovino plusieurs fois (9) sur une même page avec 9 séries de photos...

Est ce possible ?

Merci d'avance de votre aide !

**Bovino** · 13/06/2010, 12h53

Envoyé par Malanico

Bonjour,

je voudrais utiliser le script de Bovino plusieurs fois (9) sur une même page avec 9 séries de photos...

Est ce possible ?

Merci d'avance de votre aide !

vous lancez le script en passant en paramètre le nom de classe CSS des élément à enchainer.

Oui, il suffit de lancer le script avec des noms de classes différents

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
new Fondu('classe_1');
new Fondu('classe_2');
...
new Fondu('classe_n')

**vodiem** · 13/07/2010, 02h12

merci Bovino

je n'ai pas regardé le code de plus près.
je déplore qu'il n'y a pas une partie réservé et commenté dans le code pour le paramétrage du délai entre fondu et délai de transition.
je craignais de voir le chargement des images comme dans la démo mais ca va.
pas de soucis particulier, simple d'utilisation : merci.

Fondu enchainé [Sources]

Contribuez

Discussions similaires

Partager

Partager