Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>follow - 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:0; |
| padding:0; |
| background:#000; |
| } |
| #screen { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| </style> |
| <script type="text/javascript"> |
| //======================================================================= |
| // script: Gerard Ferrandez - Ge-1-doot - July 2000 / February 2002 |
| // http://www.dhteumeuleu.com |
| // ====================================================================== |
| var object = new Array(); |
| var sp = 4; |
| var rs = 2; |
| var N = 0; |
| var xm = 0; |
| var ym = 0; |
| document.onmousemove = function(e){ |
| if (window.event) e = window.event; |
| xm = (e.x || e.clientX); |
| ym = (e.y || e.clientY); |
| } |
| function CObj(parent, img, cx, cy){ |
| var obj = document.createElement("img"); |
| obj.src = img.src; |
| this.css = obj.style; |
| this.css.position = "absolute"; |
| this.css.left = "-1000px"; |
| this.css.zIndex = 1000 - N; |
| document.getElementById("screen").appendChild(obj); |
| this.OmW = img.width * 0.5; |
| this.OmH = img.height * 0.5; |
| this.ddx = 0; |
| this.ddy = 0; |
| this.PX = 0; |
| this.PY = 0; |
| this.x = 0; |
| this.y = 0; |
| this.x0 = 0; |
| this.y0 = 0; |
| this.cx = cx; |
| this.cy = cy; |
| this.parent = parent; |
| } |
| CObj.prototype.run = function () { |
| if (!this.parent) { |
| this.x0 = xm; |
| this.y0 = ym; |
| } else { |
| this.x0 = this.parent.x; |
| this.y0 = this.parent.y; |
| } |
| this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp; |
| this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp; |
| this.css.left = Math.round(this.x - this.OmW) + 'px'; |
| this.css.top = Math.round(this.y - this.OmH) + 'px'; |
| } |
| onload = function() { |
| xm = document.getElementById("screen").offsetWidth * 0.5; |
| ym = document.getElementById("screen").offsetHeight * 0.5; |
| var k = 180 / Math.PI, OO, o; |
| object[N++] = OO = new CObj(null, document.getElementById("I1"), 0, 0); |
| for(var i=0;i<360;i+=60){ |
| var O = OO; |
| for(var j=10;j<35;j+=1){ |
| var x = Math.cos((i+10*j)/k)*j; |
| var y = Math.sin((i+10*j)/k)*j; |
| object[N++] = o = new CObj(O , document.getElementById("I1"), x, y); |
| O = o; |
| } |
| } |
| setInterval(function() { |
| for (var i = 0; i < N; i++) object[i].run(); |
| }, 16); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="screen"></div> |
| <img id="I1" src="../images/sphereT2a.gif" style="left:-10000px;position:absolute"> |
| </body> |
| </html> |
