Direct Link
- Download: http://www.dhteumeuleu.com/dhtml/s1.html
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>there you are - 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 { |
| background: #111; |
| width:100%; |
| height:100%; |
| } |
| #g1d { |
| position:absolute; |
| width:100%; |
| height:100%; |
| } |
| #g1d .span { |
| overflow:hidden; |
| font-size:1px; |
| position:absolute; |
| left:-10000px; |
| } |
| </style> |
| <script type="text/javascript"> |
| // ===================================================================== |
| // script: Gerard Ferrandez - Ge-1-doot - FEBRUARY 16, Y2K+4 |
| // http://www.dhteumeuleu.com |
| // ===================================================================== |
| // |
| var scr, doot; |
| var object = new Array(); |
| var nx = 0; |
| var ny = 0; |
| var Ix = 0; |
| var Iy = 0; |
| var Ox = 0; |
| var Oy = 0; |
| /////////////////// |
| var NX = 7; |
| var NY = 5; |
| /////////////////// |
| var xm = 0; |
| var ym = 0; |
| function CObj(y,x){ |
| this.obj = document.createElement("span"); |
| this.obj.className="span"; |
| this.img = document.createElement("img"); |
| this.img.style.position="absolute"; |
| this.img.src = doot.src; |
| this.obj.appendChild(this.img); |
| scr.appendChild(this.obj); |
| this.x = x; |
| this.y = y; |
| this.L = 0; |
| this.T = 0; |
| this.xr = (this.x / 2) % 1 ? 1 : -1; |
| this.yr = (this.y / 2) % 1 ? 1 : -1; |
| this.xf = Math.random() * 8 + 1; |
| this.yf = Math.random() * 8 + 1; |
| this.GE1 = function (){ |
| this.obj.style.left = Math.round(this.L + (-nx / 4 + xm) * (this.xr * this.xf)) + "px"; |
| this.obj.style.top = Math.round(this.T + (-ny / 4 + ym) * (this.yr * this.yf)) + "px"; |
| } |
| this.DOOT = function (){ |
| this.L = Math.round(this.x * Nx); |
| this.T = Math.round(this.y * Ny); |
| this.obj.style.width = Math.round(Nx + 1) + "px"; |
| this.obj.style.height = Math.round(Ny + 1) + "px"; |
| this.img.style.left = Math.round(-this.L) + "px"; |
| this.img.style.top = Math.round(-this.T) + "px"; |
| } |
| } |
| document.onmousemove = function(e){ |
| if (window.event) e = window.event; |
| xm = (e.x || e.clientX) / 2; |
| ym = (e.y || e.clientY) / 2; |
| if(Math.abs(2 * xm - nx / 2) < 2 && Math.abs(2 * ym - ny / 2) < 2){ |
| xm = nx / 4; |
| ym = ny / 4; |
| } |
| } |
| function resize(){ |
| nx = scr.offsetWidth; |
| ny = scr.offsetHeight; |
| Ix = doot.width; |
| Iy = doot.height; |
| Nx = Math.round(Ix / NX); |
| Ny = Math.round(Iy / NY); |
| Ox = (nx - Ix) / 2; |
| Oy = (ny - Iy) / 2; |
| var css = scr.style; |
| css.left = Math.round(Ox) + "px"; |
| css.top = Math.round(Oy) + "px"; |
| css.width = Math.round(Ix) + "px"; |
| css.height = Math.round(Iy) + "px"; |
| var i = 0, o; |
| while (o = object[i++]) |
| o.DOOT(); |
| } |
| onresize = resize; |
| function run() { |
| var i = 0, o; |
| while (o = object[i++]) |
| o.GE1(); |
| setTimeout(run, 16); |
| } |
| onload = function() { |
| scr = document.getElementById("g1d"); |
| doot = document.getElementById("doot"); |
| var k = 0; |
| for(var i=0; i<NY; i++) |
| for(var j=0;j<NX;j++) |
| object[k++] = new CObj(i,j); |
| resize(); |
| xm = nx / 4 - Math.random() * 50; |
| ym = ny / 4 - Math.random() * 50; |
| run(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="g1d"></div> |
| <img id="doot" src="../images/DeepBlue.jpg" style="visibility:hidden"> |
| </body> |
| </html> |
