Fondu enchainé

Présentation
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.

Exemple en ligne
Téléchargement
2  0 
Téléchargé 65 fois Voir les 44 commentaires
Détails
Catégories : Images / Graphisme
Voir tous les téléchargements de l'auteur
Licence : Gratuit
Date de mise en ligne : 30 décembre 2010




Avatar de hornetbzz hornetbzz - Membre éclairé https://www.developpez.com
le 21/02/2010 à 0:25
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
<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
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);
Avatar de kimjoa kimjoa - Membre confirmé https://www.developpez.com
le 21/02/2010 à 14:31
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
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
Avatar de hornetbzz hornetbzz - Membre éclairé https://www.developpez.com
le 21/02/2010 à 16:03
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
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 .. ?
Avatar de kimjoa kimjoa - Membre confirmé https://www.developpez.com
le 21/02/2010 à 20:55
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
Avatar de hornetbzz hornetbzz - Membre éclairé https://www.developpez.com
le 21/02/2010 à 22:50
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
Avatar de kimjoa kimjoa - Membre confirmé https://www.developpez.com
le 22/02/2010 à 0:28
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
Avatar de Bovino Bovino - Rédacteur https://www.developpez.com
le 22/02/2010 à 13:44
Citation Envoyé par kimjoa Voir le message
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
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
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
Avatar de kimjoa kimjoa - Membre confirmé https://www.developpez.com
le 22/02/2010 à 18:08
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 !
Avatar de Auteur Auteur - Expert éminent https://www.developpez.com
le 25/02/2010 à 18:49
Il ne reste plus à combiner ce script avec le script du miroir
Developpez.com décline toute responsabilité quant à l'utilisation des différents éléments téléchargés.
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -