1 | // ================================================== |
---|
2 | // script realized by Gérard Ferrandez - June 2006 |
---|
3 | // http://www.dhteumeuleu.com |
---|
4 | // ================================================== |
---|
5 | |
---|
6 | id = function(o) { return document.getElementById(o); } |
---|
7 | px = function (x) { return ''.concat(Math.round(x), 'px'); } |
---|
8 | |
---|
9 | ////////////////////////////////////////////////////////////////////////////// |
---|
10 | function resize() { gf.resize(); } |
---|
11 | onresize = resize; |
---|
12 | |
---|
13 | document.onmousemove = function(e) |
---|
14 | { |
---|
15 | if(window.event) e=window.event; |
---|
16 | gf.xm = (e.x || e.clientX) - gf.nx - gf.nw * .5; |
---|
17 | gf.ym = (e.y || e.clientY) - gf.ny - gf.nh * .5; |
---|
18 | } |
---|
19 | |
---|
20 | ////////////////////////////////////////////////////////////////////////////// |
---|
21 | var gf = { |
---|
22 | O : [], |
---|
23 | cont : 0, |
---|
24 | N : 0, |
---|
25 | S : 0, |
---|
26 | img : 0, |
---|
27 | spa : 0, |
---|
28 | xm : 0, |
---|
29 | ym : 0, |
---|
30 | nx : 0, |
---|
31 | ny : 0, |
---|
32 | nw : 0, |
---|
33 | nh : 0, |
---|
34 | cx : 0, |
---|
35 | cy : 0, |
---|
36 | zoom : 1, |
---|
37 | x : 0, |
---|
38 | y : 0, |
---|
39 | z : -40000, |
---|
40 | xt : 0, |
---|
41 | yt : 0, |
---|
42 | zt : 0, |
---|
43 | ////////////////////////////////////////////////////////////////////////////// |
---|
44 | resize : function () |
---|
45 | { |
---|
46 | var o = id('canvas'); |
---|
47 | gf.nx = o.offsetLeft; |
---|
48 | gf.ny = o.offsetTop; |
---|
49 | gf.nw = o.offsetWidth; |
---|
50 | gf.nh = o.offsetHeight; |
---|
51 | gf.zoom = gf.nh / 700; |
---|
52 | }, |
---|
53 | |
---|
54 | CObj : function (n) |
---|
55 | { |
---|
56 | this.n = n; |
---|
57 | this.x = gf.zoom * Math.random() * gf.nw * 2 - gf.nw; |
---|
58 | this.y = gf.zoom * Math.random() * gf.nh * 2 - gf.nh; |
---|
59 | this.z = Math.round(n * (10000 / gf.N)); |
---|
60 | this.w = gf.img[n].width; |
---|
61 | this.h = gf.img[n].height; |
---|
62 | this.oxt = gf.spa[n]; |
---|
63 | this.oxs = this.oxt.style; |
---|
64 | this.txt = gf.spa[n].innerHTML; |
---|
65 | this.oxt.innerHTML = ""; |
---|
66 | this.obj = gf.img[n]; |
---|
67 | this.obs = this.obj.style; |
---|
68 | this.obj.parent = this; |
---|
69 | this.obj.onclick = function() { this.parent.click(); } |
---|
70 | this.obj.ondrag = function() { return false; } |
---|
71 | this.oxt.style.zIndex = this.obj.style.zIndex = Math.round(1000000 - this.z); |
---|
72 | this.F = false; |
---|
73 | this.CF = 100; |
---|
74 | this.sto = []; |
---|
75 | |
---|
76 | this.anim = function() |
---|
77 | { |
---|
78 | var f = 700 + this.z - gf.z; |
---|
79 | if (f > 0) |
---|
80 | { |
---|
81 | var d = 1000 / f; |
---|
82 | var X = gf.nw * .5 + ((this.x - gf.x - gf.cx) * d); |
---|
83 | var Y = gf.nh * .5 + ((this.y - gf.y - gf.cy) * d); |
---|
84 | var W = d * this.w * gf.zoom; |
---|
85 | var H = d * this.h * gf.zoom; |
---|
86 | this.obs.left = px(X - W * .5); |
---|
87 | this.obs.top = px(Y - H * .5); |
---|
88 | this.obs.width = px(W); |
---|
89 | this.obs.height = px(H); |
---|
90 | this.oxs.visibility = (this.CF-- > 0 && Math.random() > .9) ? "hidden" : "visible"; |
---|
91 | this.oxs.left = px(X - W * .5); |
---|
92 | this.oxs.top = px(Y + H * .5); |
---|
93 | if((gf.zt - gf.z) < 20) |
---|
94 | { |
---|
95 | if(!this.F) |
---|
96 | { |
---|
97 | this.F = true; |
---|
98 | this.CF = Math.random() * 200; |
---|
99 | this.oxs.fontSize = px(1 + d * 20 * gf.zoom); |
---|
100 | var T = ""; |
---|
101 | var tn = this.txt.length; |
---|
102 | for(var i = 0; i < tn; i++) |
---|
103 | { |
---|
104 | T = T.concat(this.txt.charAt(i)); |
---|
105 | this.sto[i] = setTimeout('gf.O['.concat(n, '].oxt.innerHTML = "', T.concat(" "), '";'), Math.round(f / 4) + 32 * i); |
---|
106 | } |
---|
107 | } |
---|
108 | } |
---|
109 | else |
---|
110 | { |
---|
111 | this.F = false; |
---|
112 | this.oxt.innerHTML = ""; |
---|
113 | } |
---|
114 | } |
---|
115 | else |
---|
116 | { |
---|
117 | this.x = gf.zoom * Math.random() * gf.nw * 2 - gf.nw; |
---|
118 | this.y = gf.zoom * Math.random() * gf.nh * 2 - gf.nh; |
---|
119 | this.z += 10000; |
---|
120 | this.oxs.zIndex = this.obs.zIndex = Math.round(1000000 - this.z); |
---|
121 | } |
---|
122 | } |
---|
123 | |
---|
124 | this.cto = function() |
---|
125 | { |
---|
126 | var i = this.txt.length; |
---|
127 | while (i--) clearTimeout(this.sto[i]); |
---|
128 | } |
---|
129 | |
---|
130 | this.click = function() |
---|
131 | { |
---|
132 | var i = gf.N; |
---|
133 | while (i--) gf.O[i].cto(); |
---|
134 | if(gf.S != this) |
---|
135 | { |
---|
136 | gf.xt = this.x; |
---|
137 | gf.yt = this.y; |
---|
138 | gf.zt = this.z; |
---|
139 | gf.S = this; |
---|
140 | } |
---|
141 | else |
---|
142 | { |
---|
143 | gf.S = 0; |
---|
144 | gf.zt += 1600; |
---|
145 | } |
---|
146 | } |
---|
147 | }, |
---|
148 | |
---|
149 | init : function () |
---|
150 | { |
---|
151 | gf.cx = gf.nw / 2; |
---|
152 | gf.cy = gf.nh / 2; |
---|
153 | gf.cont = id("canvas"); |
---|
154 | gf.img = id("canvas").getElementsByTagName("img"); |
---|
155 | gf.spa = id("canvas").getElementsByTagName("span"); |
---|
156 | gf.N = gf.img.length; |
---|
157 | for (var i = 0; i < gf.N; i++) gf.O[i] = new gf.CObj(i); |
---|
158 | gf.run(); |
---|
159 | gf.O[0].click(); |
---|
160 | }, |
---|
161 | |
---|
162 | run : function () |
---|
163 | { |
---|
164 | gf.cx += (gf.xm - gf.cx) * .1; |
---|
165 | gf.cy += (gf.ym - gf.cy) * .1; |
---|
166 | gf.x += (gf.xt - gf.x) * .05; |
---|
167 | gf.y += (gf.yt - gf.y) * .05; |
---|
168 | gf.z += (gf.zt - gf.z) * .05; |
---|
169 | var i = gf.N; |
---|
170 | while (i--) gf.O[i].anim(); |
---|
171 | setTimeout(gf.run, 16); |
---|
172 | } |
---|
173 | } |
---|
174 | |
---|
175 | onload = function() { |
---|
176 | resize(); |
---|
177 | gf.init(); |
---|
178 | } |
---|
179 | |
---|