2 pièce(s) jointe(s)
mirroir mon beau mirroir (effet de reflection)
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:
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 :ccool:)
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 :ccool:
[/edit]
Les rêves de SPaceFrog ont de l'avenir
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:
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;
}
});
} |
Citation:
Je me doutais bien que tu allais nous jqueriser ça :mouarf:
Et bien maintenant, je l'ai « canvanisé ». :mrgreen:
Lien temporaire : http://danielhagnoul.developpez.com/essais/canvas.html
