mirroir mon beau mirroir (effet de reflection)

**SpaceFrog** · 21/01/2010, 10h49

Voici encore une fois un script que j'ai codé cette nuit en rêvant, et que je me suis attaché a réaliser ce matin

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nouvelle page 1</title>
<style type="text/css">
html, body {height:100%;
            width:100%;
            margin:0;
            padding:0;}
body {
	background-color:silver;}            
#one {position:absolute;
	  top:100px;
	  left:100px;
	  }
 
#two {position:absolute;
	  top:100px;
	  left:400px;
	  }
 
</style>
 
<script type="text/javascript">
  /*======================================/
 /  Yet another one dreamt by SPaceFrog  /
/ =====================================*/
 
function reflect(){
var tabmirroir=new Array();
var tabimg=document.getElementsByTagName('img');
var blancstrip=document.createElement('div');
blancstrip.style.height='1px';
blancstrip.style.position='relative';
blancstrip.style.clear='both';
blancstrip.innerHTML=""
blancstrip.display="block";
blancstrip.overflow="hidden";
blancstrip.style.fontSize="0px";
blancstrip.style.lineHeight="0px";
blancstrip.style.border="solid 0px";
blancstrip.style.margin="0";
blancstrip.style.padding="0";
blancstrip.style.overflow="hidden";
 
var blancholder=document.createElement('div');
 
//recupération des images à traiter
var i=0;
 
while(tabimg[i] ){
	if (/(^|\W)mirroir(\W|$)/.test(tabimg[i].className)){
	 	tabmirroir.push(tabimg[i])
	 	 }
	 i++;	 
}	 
 
 
i=0
while(tabmirroir[i++]){
	blancstrip.style.backgroundImage="url('"+tabmirroir[i-1].src+"')";
	var imgtop=tabmirroir[i-1].offsetTop;
	var imgleft=tabmirroir[i-1].offsetLeft;
	var imgwidth=tabmirroir[i-1].offsetWidth;
	var imgheight=tabmirroir[i-1].offsetHeight;
 
	var j=0;
	var holder=blancholder.cloneNode(true);
	holder.style.position='absolute';
	holder.style.top=imgtop+imgheight+"px";
	holder.style.left=imgleft+"px";
 
	while(j++<imgheight){
		var puzzlestrip=blancstrip.cloneNode(true)
		puzzlestrip.style.width=imgwidth+"px";
		puzzlestrip.style.backgroundPosition="0px "+j+"px"
		puzzlestrip.style.opacity = (90-(j/imgheight*100))/100;
		puzzlestrip.style.filter = 'alpha(opacity=' + (90-((j/imgheight*100))) + ')';
		holder.appendChild(puzzlestrip)
	}
 
 
	document.body.appendChild(holder)	
}
 
}
</script>
 
</head>
 
<body onload="reflect()">
<img id="one" src="img/logo.gif" class="mirroir" />
<img id="two" src="img/javascript-faq.gif" class="mirroir" />
 
</body>
 
</html>

mettre les deux images dans un répertoire img au niveau du fichier html
ou mettre n'importe quelle image avec dans le class le mot mirroir.

ça marche même avec des gifs animés

on peut aussi rajouté un décallage pour avoir une image en biais, voire rajouter deux fois de suite le puzzlestrip pour avoir un effet de reflet allongé ..

Il ne rend pas bien sous IE6 pour une question de hauteur du holder
si quelqu'un à un patch pour IE6 (proposé par NoobX

)

Sinon il est valide w3c strict et compatible IE FFX chrome

Pour avoir une meilleure idée du rendu:
Page de démonstration

.

[edit]
Patch pour IE6 proposé pas NoobX

[/edit]

**Bovino** · 21/01/2010, 12h58

Pas mal du tout Spaffy

**SpaceFrog** · 21/01/2010, 13h37

Tiens c'est amusant !

On peut modifier un peu le code
en ajoutant un décallage pour avoir un effet d'ombre en biais
juste avant d'appender le puzzlestrip dans le holder :

Code :

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

1
2
3
 
	puzzlestrip.style.marginLeft=-j;
        holder.appendChild(puzzlestrip)

**SpaceFrog** · 21/01/2010, 13h57

Voici une autre version intégrant une orientation du reflet
il suffit d'utiliser les class suivantes:

miroir = reflet vertical
miroir1 = reflet vers la droite
miroir2 = reflet vers la gauche

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Miroir mon beau miroir</title>
<style type="text/css">
html, body {height:100%;
            width:100%;
            margin:0;
            padding:0;}
body {
	background-color:#000000;}      
 
#one {position:absolute;
	  top:200px;
	  left:100px;
	  }
 
#two {position:absolute;
	  top:190px;
	  left:400px;
	  }
 
#three {position:absolute;
	  top:240px;
	  left:700px;
	  }
 
#A {position:absolute;
	  top:65px;
	  left:100px;
	  }
 
#B {position:absolute;
	  top:5px;
	  left:400px;
	  }
 
#C {position:absolute;
	  top:60px;
	  left:700px;
	  }
 
 
 
</style>
 
<script type="text/javascript">
function reflect(){
var tabmirroir=new Array();
var tabimg=document.getElementsByTagName('img');
var blancstrip=document.createElement('div');
blancstrip.style.height='1px';
blancstrip.style.position='relative';
blancstrip.style.clear='both';
blancstrip.innerHTML=""
blancstrip.display="block";
blancstrip.overflow="hidden";
blancstrip.style.fontSize="0px";
blancstrip.style.lineHeight="0px";
blancstrip.style.border="solid 0px";
blancstrip.style.margin="0px";
blancstrip.style.padding="0px";
blancstrip.style.overflow="hidden";
 
var blancholder=document.createElement('div');
 
//recupération des images à traiter
var i=0;
 
while(tabimg[i] ){
	if (/(^|\W)miroir\d?(\W|$)/.test(tabimg[i].className)){
	 	tabmirroir.push(tabimg[i])
	 	 }
	 i++;	 
}	 
 
 
i=0
while(tabmirroir[i++]){
	blancstrip.style.backgroundImage="url('"+tabmirroir[i-1].src+"')";
	var imgtop=tabmirroir[i-1].offsetTop;
	var imgleft=tabmirroir[i-1].offsetLeft;
	var imgwidth=tabmirroir[i-1].offsetWidth;
	var imgheight=tabmirroir[i-1].offsetHeight;
	var reflet=""
	var classe=tabmirroir[i-1].className
	switch(classe.match(/miroir\d?/)[0] ){
		case "miroir" : reflet ="v";
						break;
		case "miroir1" : reflet ="d";
						break;
		case "miroir2" : reflet ="g";
						break;
		}				
 
 
	var j=0;
	var holder=blancholder.cloneNode(true);
	holder.style.position='absolute';
	holder.style.top=imgtop+imgheight+"px";
	holder.style.left=imgleft+"px";
 
 
	while(j++<imgheight){
		var puzzlestrip=blancstrip.cloneNode(true)
		puzzlestrip.style.width=imgwidth+"px";
		puzzlestrip.style.backgroundPosition="0px "+j+"px"
		puzzlestrip.style.opacity = (90-(j/imgheight*100))/100;
		puzzlestrip.style.filter = 'alpha(opacity=' + (90-((j/imgheight*100))) + ')';
 
		switch(reflet){
			case "d" : puzzlestrip.style.marginLeft=- Math.floor(j*1.7)+"px";
					     break;
			case "g" : puzzlestrip.style.marginLeft= Math.floor(j*1.8)+"px";
					     break;
			 }
 
 
		holder.appendChild(puzzlestrip)
	}
 
	document.body.appendChild(holder)	
}
 
}
</script>
 
</head>
 
<body onload="reflect()">
<img id="A" src="img/logo.gif"  />
<img id="B" src="img/javascript-faq.gif"  />
<img id="C" src="img/rotating.gif"  />
<img id="one" src="img/logo.gif" class="miroir1" />
<img id="two" src="img/javascript-faq.gif" class="miroir" />
<img id="three" src="img/rotating.gif" class="miroir2" />
 
</body>
 
</html>

[edit]
Petite rectif autorisant le cumul des class dans la balise image

**SpaceFrog** · 21/01/2010, 14h12

on peut jouer sur l'angle avec :

Code :

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

1
2
3
4
5
6
switch(reflet){
			case "d" : puzzlestrip.style.marginLeft=- Math.floor(j*1.7)+"px";
					     break;
			case "g" : puzzlestrip.style.marginLeft= Math.floor(j*1.8)+"px";
					     break;
			 }

On peut aussi imaginer alors faire un step 2 pour ne plus prendre qu'une ligne de pixels sur deux et simulerl'ecrasement

**SpaceFrog** · 21/01/2010, 15h46

comme dit plus haut: une autre façon d'influer sur l'agle et l'ecrasement du reflet est le step de la boucle

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
	while(j<imgheight){
		var puzzlestrip=blancstrip.cloneNode(true)
		puzzlestrip.style.width=imgwidth+"px";
		puzzlestrip.style.backgroundPosition="0px "+j+"px"
		puzzlestrip.style.opacity = (90-(j/imgheight*100))/100;
		puzzlestrip.style.filter = 'alpha(opacity=' + (90-((j/imgheight*100))) + ')';
 
		switch(reflet){
			case "d" : puzzlestrip.style.marginLeft=-j+"px"; //- Math.floor(j*1.7)+"px";
					     break;
			case "g" : puzzlestrip.style.marginLeft= j+"px"; //Math.floor(j*1.8)+"px";
					     break;
			 }
 
 
		holder.appendChild(puzzlestrip)
		j=j+2
	}

**Auteur** · 21/01/2010, 19h24

Je n'arrive vraiment pas à comprendre comment tu mets l'image à l'envers

**Bovino** · 21/01/2010, 20h33

Envoyé par Auteur

Je n'arrive vraiment pas à comprendre comment tu mets l'image à l'envers

Ligne par ligne en fait.

**Auteur** · 21/01/2010, 20h59

je m'en suis douté, mais si je mets les lignes de bas en haut l'image n'est toujours pas à l'envers....

**SpaceFrog** · 22/01/2010, 08h22

L'explication

je colle sous l'image une serie de div de 1px de hauteur ayant la même largeur que l'image

puis en background de chaque div je colle l'image, mais en decallant la position verticale de celle-ci

en fait je découpe l'image en bandes de 1 pixel que je ré-assemble à l'envers

Me demande pas ou j'ai trouvé l'idée ... je l'ai rêvé

**SpaceFrog** · 23/01/2010, 20h55

mais si je mets les lignes de bas en haut l'image n'est toujours pas à l'envers....

si si ! le pixel étant la plus petit unité pour découper l'image le fait de les mettre dans l'ordre inverse produit bien cet effet de mirroir

**Auteur** · 23/01/2010, 21h57

Envoyé par SpaceFrog

si si ! le pixel étant la plus petit unité pour découper l'image le fait de les mettre dans l'ordre inverse produit bien cet effet de mirroir

euh....

Dans ce cas tu pourrais orienter l'image dans n'importe quelle direction ?

**SpaceFrog** · 23/01/2010, 22h39

Je peux mettre le reflet au dessus
Je peux faire un reflet horizontal ... à droite ou a gauche

Tu viens de me donner une idée !!!
Je devrais pouvoir générer un mouvement d'ondulation horizontale ou verticale à partir d'une image !

**danielhagnoul** · 24/01/2010, 02h49

Bonsoir.

Joli ! Je viens de manipuler une image png sans problème.

**le_chomeur** · 24/01/2010, 21h15

super !!

**NoobX** · 26/01/2010, 13h56

Comme dit le proverbe : "la nuit porte conseil", enfin de là à coder du JS en dormant ....

**danielhagnoul** · 27/01/2010, 02h32

Bonsoir.

J'en ai fait un plugin jQuery, pour l'instant uniquement accessible par ce lien : [lien obsolète]

Le plugin, comme le programme original, a un problème sous IE8 à cause du bug offsetTop.

Je demande l'autorisation de notre génial SPaceFrog pour le mettre à disposition des forumeurs sur mon site.

[Edit 27 janvier 2010]
Plugin version 1.0.4, avec options : http://danielhagnoul.developpez.com/...t/reflect.html

**SpaceFrog** · 27/01/2010, 09h00

Je me doutais bien que tu allais nous jqueriser ça

Je suis cité dans les sources

c'est bon pour la postérité ça

Je vais enfin devenir célèbre ... pas riche, mais célèbre.
Suffit d'ajouter que je suis à la recherche d'un boulot payé à la hauteur de mon tavail (c'est a dire de toute façon plus qu'aujourd'hui) et c'est tout bon

Bien entendu DH ce code est livré au web pour utilisation libre et gratuite sans qu'aucune responsabilité de ma part ne puisse être engagée

PS; j'ai testé ta page sous IE8 ... pas vu de différence ..

**danielhagnoul** · 27/01/2010, 11h09

Bonjour.

Les contributions sont libres et gratuites, oui, mais il est tout de même plus poli d'en informer l'auteur puisque son nom doit être cité. Merci.

Pour IE8, je fais partie des malheureux qui ont ce problème !

Il suffit de chercher avec Google sur « bug IE8 offsetTop » pour en trouver des pages. Dans la base de renseignement de Microsoft on dit que ce bug est lié à une ancienne mise à jour de sécurité que tout le monde n'a pas faite. Elle est soi-disant réversible en suivant une procédure que je ne comprends pas.

Mais j'en ai marre (je dis marre, mais je pense bien autre chose

) de ce « mort-vivant », que ceux qui s'en servent et qui ont le même bug passent comme moi à Firefox 3.6 et à Chrome 4.

**danielhagnoul** · 31/01/2010, 22h45

Bonsoir.

Pour mon deuxième exercice en HTML5, j'ai décidé de transposer l'idée du miroir dans le futur en utilisant canvas.

Présomptueux, dites-vous !

Que nenni, cela fonctionne en quelques lignes de codes :

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
if ($("#canvasID1")[0].getContext){
    var ctx = $("#canvasID1")[0].getContext('2d');
 
    var img = new Image();
    img.src = "images/imageTest.png";
 
    $(img).load(function(){
        ctx.drawImage(img, 10, 10);
        ctx.save();
        ctx.globalAlpha = 0.9;
 
        for (var i = 1; i < 201; i++){
            ctx.drawImage(img, 0, 200-i, 270, 1, 10+i, 209+i, 270, 1);
            ctx.save();
            ctx.globalAlpha = 0.9 - i/200;
        }
    });
}