Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>prometeus - Interactive DHTML art-demos</title> |
| <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> |
| <meta http-equiv="imagetoolbar" content="no"> |
| <style type="text/css"> |
| html { |
| overflow: hidden; |
| } |
| body { |
| margin: 0px; |
| padding: 0px; |
| background: #111; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| cursor: crosshair; |
| } |
| #canvas { |
| position:absolute; |
| left: 0%; |
| top: 0%; |
| width: 100%; |
| height: 100%; |
| background: #000; |
| overflow: hidden; |
| } |
| #canvas img { |
| position: absolute; |
| background: #666; |
| overflow: hidden; |
| cursor: pointer; |
| left: 100%; |
| border-color: #000; |
| border-style: solid; |
| border-width: 1px; |
| -ms-interpolation-mode:nearest-neighbor; |
| } |
| #canvas span { |
| position: absolute; |
| color: #9C9; |
| font-family: 'courier new', typewriter, matrix, monospace; |
| font-size: 0px; |
| white-space: nowrap; |
| left: -1000px; |
| background: #010; |
| filter: alpha(opacity=90); |
| opacity: 0.9; |
| } |
| </style> |
| <script type="text/javascript"> |
| // ================================================== |
| // script realized by Gérard Ferrandez - June 2006 |
| // http://www.dhteumeuleu.com |
| // ================================================== |
| id = function(o) { return document.getElementById(o); } |
| px = function (x) { return ''.concat(Math.round(x), 'px'); } |
| ////////////////////////////////////////////////////////////////////////////// |
| function resize() { gf.resize(); } |
| onresize = resize; |
| document.onmousemove = function(e) |
| { |
| if(window.event) e=window.event; |
| gf.xm = (e.x || e.clientX) - gf.nx - gf.nw * .5; |
| gf.ym = (e.y || e.clientY) - gf.ny - gf.nh * .5; |
| } |
| ////////////////////////////////////////////////////////////////////////////// |
| var gf = { |
| O : [], |
| cont : 0, |
| N : 0, |
| S : 0, |
| img : 0, |
| spa : 0, |
| xm : 0, |
| ym : 0, |
| nx : 0, |
| ny : 0, |
| nw : 0, |
| nh : 0, |
| cx : 0, |
| cy : 0, |
| zoom : 1, |
| x : 0, |
| y : 0, |
| z : -40000, |
| xt : 0, |
| yt : 0, |
| zt : 0, |
| ////////////////////////////////////////////////////////////////////////////// |
| resize : function () |
| { |
| var o = id('canvas'); |
| gf.nx = o.offsetLeft; |
| gf.ny = o.offsetTop; |
| gf.nw = o.offsetWidth; |
| gf.nh = o.offsetHeight; |
| gf.zoom = gf.nh / 700; |
| }, |
| CObj : function (n) |
| { |
| this.n = n; |
| this.x = gf.zoom * Math.random() * gf.nw * 2 - gf.nw; |
| this.y = gf.zoom * Math.random() * gf.nh * 2 - gf.nh; |
| this.z = Math.round(n * (10000 / gf.N)); |
| this.w = gf.img[n].width; |
| this.h = gf.img[n].height; |
| this.oxt = gf.spa[n]; |
| this.oxs = this.oxt.style; |
| this.txt = gf.spa[n].innerHTML; |
| this.oxt.innerHTML = ""; |
| this.obj = gf.img[n]; |
| this.obs = this.obj.style; |
| this.obj.parent = this; |
| this.obj.onclick = function() { this.parent.click(); } |
| this.obj.ondrag = function() { return false; } |
| this.oxt.style.zIndex = this.obj.style.zIndex = Math.round(1000000 - this.z); |
| this.F = false; |
| this.CF = 100; |
| this.sto = []; |
| this.anim = function() |
| { |
| var f = 700 + this.z - gf.z; |
| if (f > 0) |
| { |
| var d = 1000 / f; |
| var X = gf.nw * .5 + ((this.x - gf.x - gf.cx) * d); |
| var Y = gf.nh * .5 + ((this.y - gf.y - gf.cy) * d); |
| var W = d * this.w * gf.zoom; |
| var H = d * this.h * gf.zoom; |
| this.obs.left = px(X - W * .5); |
| this.obs.top = px(Y - H * .5); |
| this.obs.width = px(W); |
| this.obs.height = px(H); |
| this.oxs.visibility = (this.CF-- > 0 && Math.random() > .9) ? "hidden" : "visible"; |
| this.oxs.left = px(X - W * .5); |
| this.oxs.top = px(Y + H * .5); |
| if((gf.zt - gf.z) < 20) |
| { |
| if(!this.F) |
| { |
| this.F = true; |
| this.CF = Math.random() * 200; |
| this.oxs.fontSize = px(1 + d * 20 * gf.zoom); |
| var T = ""; |
| var tn = this.txt.length; |
| for(var i = 0; i < tn; i++) |
| { |
| T = T.concat(this.txt.charAt(i)); |
| this.sto[i] = setTimeout('gf.O['.concat(n, '].oxt.innerHTML = "', T.concat("_"), '";'), Math.round(f / 4) + 32 * i); |
| } |
| } |
| } |
| else |
| { |
| this.F = false; |
| this.oxt.innerHTML = ""; |
| } |
| } |
| else |
| { |
| this.x = gf.zoom * Math.random() * gf.nw * 2 - gf.nw; |
| this.y = gf.zoom * Math.random() * gf.nh * 2 - gf.nh; |
| this.z += 10000; |
| this.oxs.zIndex = this.obs.zIndex = Math.round(1000000 - this.z); |
| } |
| } |
| this.cto = function() |
| { |
| var i = this.txt.length; |
| while (i--) clearTimeout(this.sto[i]); |
| } |
| this.click = function() |
| { |
| var i = gf.N; |
| while (i--) gf.O[i].cto(); |
| if(gf.S != this) |
| { |
| gf.xt = this.x; |
| gf.yt = this.y; |
| gf.zt = this.z; |
| gf.S = this; |
| } |
| else |
| { |
| gf.S = 0; |
| gf.zt += 1600; |
| } |
| } |
| }, |
| init : function () |
| { |
| gf.cx = gf.nw / 2; |
| gf.cy = gf.nh / 2; |
| gf.cont = id("canvas"); |
| gf.img = id("canvas").getElementsByTagName("img"); |
| gf.spa = id("canvas").getElementsByTagName("span"); |
| gf.N = gf.img.length; |
| for (var i = 0; i < gf.N; i++) gf.O[i] = new gf.CObj(i); |
| gf.run(); |
| gf.O[0].click(); |
| }, |
| run : function () |
| { |
| gf.cx += (gf.xm - gf.cx) * .1; |
| gf.cy += (gf.ym - gf.cy) * .1; |
| gf.x += (gf.xt - gf.x) * .05; |
| gf.y += (gf.yt - gf.y) * .05; |
| gf.z += (gf.zt - gf.z) * .05; |
| var i = gf.N; |
| while (i--) gf.O[i].anim(); |
| setTimeout(gf.run, 16); |
| } |
| } |
| onload = function() { |
| resize(); |
| gf.init(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="canvas"> |
| <img src="../images/slide109.jpg"><span>Little girls may have taken<br>ballet lessons here.</span> |
| <img src="../images/slide112.jpg"><span>Stealing fire from Gods</span> |
| <img src="../images/slide94.jpg"><span>Mussgorsky's Gopak played in my head</span> |
| <img src="../images/slide108.jpg"><span>The coffee tasted nice.<br>I nearly fainted, though.</span> |
| <img src="../images/slide113.jpg"><span>The plant was closed for good.</span> |
| <img src="../images/slide126.jpg"><span>They planned to direct all ressources<br>to public health.</span> |
| <img src="../images/slide99.jpg"><span>I can almost hear them speak.</span> |
| <img src="../images/slide121.jpg"><span>Will this be their Rosetta stone?</span> |
| <img src="../images/slide111.jpg"><span>Absenteeism was dramatically lowered.</span> |
| <img src="../images/slide120.jpg"><span>Carefully calibrated for radiation levels.</span> |
| <img src="../images/slide123.jpg"><span>The underground is open forever.</span> |
| <img src="../images/slide119.jpg"><span>The true cost of the disaster<br>will not be known for decades to come.</span> |
| <img src="../images/slide132.jpg"><span>My journey had lasted seven hours.</span> |
| </div> |
| <!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 --> |
| <span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#ccc;background:#000;left:-50px;top:-18px">Loading...</span><span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;font-size:1px;width:0px;height:10px;background:#ccc"></span></span></span> |
| <script type="text/javascript">m00=document.getElementById("canvas").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script> |
| <!-- end of images_loading_bar code --> |
| </body> |
| </html> |
Recent Comments
April 5, 2012 (9:20)
February 28, 2012 (12:59)
February 26, 2012 (1:24)