[JavaScript] Fondu enchainé [Sources]

[Bovino]

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 :

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]

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 :

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

JS

Code :

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]

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 :

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]

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 :

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]

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]

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]

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]

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 :

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 :

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]

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]

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

[Coyote007]

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]

Il suffit de modifier le onload du body :

Code :

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

[Bovino]

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

[Coyote007]

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 :

<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]

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]

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]

un simple point virgule suffisait

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

[Bovino]

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 :

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

[vodiem]

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.