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
	}

mirroir mon beau mirroir (effet de reflection)

Contribuez

Vue hybride

Discussions similaires

Partager

Partager