:salut:
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.
:fleche: Exemple en ligneCode:
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); }
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 ;)