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]

mirroir mon beau mirroir (effet de reflection)

Contribuez

Mode arborescent

Discussions similaires

Partager

Partager