Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>tornado - interactive DHTML</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%; |
| } |
| #screen { |
| position:absolute; |
| left: 0%; |
| top: 0%; |
| width: 100%; |
| height: 100%; |
| background: #000; |
| overflow: hidden; |
| cursor: pointer; |
| } |
| #screen img { |
| position: absolute; |
| } |
| #control { |
| position: absolute; |
| bottom: 1em; |
| right: 1em; |
| font-family: verdana; |
| font-size: 0.8em; |
| color: gray; |
| background: #222; |
| border: #333 solid 1px |
| } |
| #control input { |
| cursor: pointer; |
| } |
| </style> |
| <script type="text/javascript"> |
| // ================================================== |
| // ===== Twister ===== |
| // script written by Gerard Ferrandez - February 2007 |
| // http://www.dhteumeuleu.com |
| // ================================================== |
| tor = { |
| O : 0, |
| xm : 0, |
| ym : 0, |
| ////////////////////////////////////////////// |
| nbrParticles : 100, |
| speed : 6, |
| strength : .4, |
| radius : 4, |
| perspective : .5, |
| ////////////////////////////////////////////// |
| mouse : function (e) { |
| if(tor.drag) { |
| if (window.event) e = window.event; |
| tor.xm = e.clientX - tor.nx; |
| tor.ym = e.clientY - tor.ny; |
| } |
| }, |
| run : function () { |
| var o = tor.O; |
| do { |
| o.R += o.V; |
| o.style.left = Math.round(o.X + Math.cos(o.R) * o.r - o.W) + 'px'; |
| o.style.top = Math.round(o.T + o.Y + Math.sin(o.R) * o.r * tor.perspective - o.H) + 'px'; |
| if (o.parent){ |
| o.X += (o.parent.X - o.X) * tor.strength; |
| o.Y += (o.parent.Y - o.Y) * tor.strength; |
| } else { |
| o.X = tor.xm; |
| o.Y = tor.ym; |
| } |
| o = o.next; |
| } while (o); |
| setTimeout(tor.run, 16); |
| }, |
| resize : function () { |
| var o = tor.scr; |
| tor.nw = o.offsetWidth; |
| tor.nh = o.offsetHeight; |
| for (tor.nx = 0, tor.ny = 0; o != null; o = o.offsetParent) { |
| tor.nx += o.offsetLeft; |
| tor.ny += o.offsetTop; |
| } |
| }, |
| zIndex : function () { |
| var o = tor.O; |
| var i = 0; |
| tor.zI = !tor.zI; |
| do { |
| o.style.zIndex = tor.zI ? 1000 - i++ : 1000 + i++; |
| o = o.next; |
| } while (o); |
| }, |
| init : function () { |
| this.scr = document.getElementById('screen'); |
| this.scr.onselectstart = function () { return false; } |
| this.scr.ondrag = function () { return false; } |
| this.scr.onmousedown = function (e) { |
| tor.drag = true; |
| tor.scr.style.cursor = "move"; |
| tor.mouse(e); |
| return false; |
| } |
| this.scr.onmouseup = function () { |
| tor.drag = false; |
| tor.scr.style.cursor = "pointer"; |
| return false; |
| } |
| this.resize(); |
| var O; |
| var img = document.getElementById('particles').getElementsByTagName('img'); |
| for (var i = 0; i < this.nbrParticles; i++) { |
| var o = document.createElement('img'); |
| if (i > 0) { |
| O.next = o; |
| o.parent = O; |
| } else this.O = o; |
| var P = img[Math.floor(i*(img.length/this.nbrParticles))]; |
| o.src = P.src; |
| o.r = tor.radius * i * i / this.nbrParticles + 5; |
| o.W = P.width * .5; |
| o.H = P.height * .5; |
| o.T = (-this.nh / 1.8) + (this.nh * 8 / (o.r + 10)); |
| o.R = Math.random() * 2 * Math.PI; |
| o.X = this.nw / 2; |
| o.Y = tor.nh * 2; |
| o.V = this.speed / o.r; |
| this.scr.appendChild(o); |
| O = o; |
| } |
| tor.xm = tor.nw /2; |
| tor.ym = tor.nh * .9; |
| tor.run(); |
| } |
| } |
| onload = function() { |
| document.onmousemove = function (e) { tor.mouse(e); } |
| onresize = tor.resize; |
| tor.init(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="screen"> |
| <div style="position:absolute;left:50%;top:50%"> |
| <img alt="" src="../images/seven3.jpg" style="position:absolute;left:-320px;top:-240px"> |
| </div> |
| </div> |
| <form id="control"> |
| <input type="checkbox" onclick="tor.zIndex()"> inner/outer<br> |
| stiffness:<input onclick="tor.strength=.2" type="radio" name="str"> |
| <input onclick="tor.strength=.4" type="radio" name="str" checked> |
| <input onclick="tor.strength=.6" type="radio" name="str"> |
| </form> |
| <div id="particles" style="visibility:hidden"> |
| <img alt="" src="../images/heaven-c4.gif"> |
| <img alt="" src="../images/heaven-c3.gif"> |
| <img alt="" src="../images/heaven-c2.gif"> |
| <img alt="" src="../images/heaven-c1.gif"> |
| </div> |
| </body> |
| </html> |
