Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>the open door - 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%; |
| } |
| #screen { |
| position: absolute; |
| left: 25%; |
| top: 20%; |
| width: 50%; |
| height: 60%; |
| background: #000; |
| overflow: hidden; |
| border: #333 solid 1px; |
| } |
| #canvasImages { |
| visibility: hidden; |
| } |
| #matrixImages { |
| visibility: hidden; |
| } |
| </style> |
| <script type="text/javascript" src="library/imgRotate.js"></script> |
| <script type="text/javascript"> |
| // //////////////////////////////////////////// |
| // script by Gerard Ferrandez - october 2000 |
| // IE DXTransform Matrix filter |
| // <canvas> version : July 2006 |
| // //////////////////////////////////////////// |
| // http://www.dhteumeuleu.com |
| // //////////////////////////////////////////// |
| function resize() { |
| var o = document.getElementById("screen"); |
| nx = o.offsetLeft; |
| ny = o.offsetTop; |
| nw = o.offsetWidth; |
| nh = o.offsetHeight; |
| canvas.resize(nw, nh); |
| } |
| onresize = resize; |
| document.onmousemove = function(e) { |
| if (window.event) e=window.event; |
| xm = (e.x || e.clientX); |
| ym = (e.y || e.clientY); |
| } |
| /////////////////////////////////////////////// |
| var xm = 200; |
| var ym = 0; |
| var nx = 0; |
| var ny = 0; |
| var nw = 0; |
| var nh = 0; |
| var v = 1; |
| var cy = 0; |
| var dOOt; |
| function rOt(){ |
| if (isCanvas) context.clearRect(0, 0, nw, nh); |
| v += xm / 800; |
| v *= .99; |
| cy += (1.5 * (ym - (nw / 2)) - cy) / 5; |
| dOOt.drawImage(nw * .5, nh * .5, v, 1, Math.abs(cy), Math.abs(cy), Math.abs(cy * 2), Math.abs(cy * 2)); |
| } |
| onload = function() { |
| /* ==== create Canvas container ==== */ |
| canvas = createCanvas(document.getElementById("screen")); |
| /* ==== init ===== */ |
| resize(); |
| dOOt = createImage(0, "nearest"); |
| /* ==== run ==== */ |
| setInterval(rOt, 16); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="screen"></div> |
| <div id="canvasImages"> |
| <img alt="0" src="../images/face5a.jpg"> |
| </div> |
| <div id="matrixImages"> |
| <img alt="0" src="../images/face5a.jpg"> |
| </div> |
| </body> |
| </html> |
