Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>radiated - 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: #000; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| .alpha { |
| filter: alpha(opacity=20); |
| opacity:0.2; |
| left: -1000px; |
| position: absolute; |
| } |
| </style> |
| <script type="text/javascript"> |
| ////////////////////////////////////////////////////////////////////// |
| // DHTML Lens Flare FX - Gerard Ferrandez - Jan 2001 - G1Doot |
| // tutorial: http://www.gamedev.net/reference/articles/article813.asp |
| // DOM crossbrowser version - April 15th, 2006 |
| // http://www.dhteumeuleu.com |
| ////////////////////////////////////////////////////////////////////// |
| var cx; |
| var cy; |
| var lx; |
| var ly; |
| var px = 0; |
| var py = 0; |
| //////////////////// |
| var dim = 256; |
| /////////////////// |
| function LensFlare(){ |
| px -= (px - lx) * .1; |
| py -= (py - ly) * .1; |
| AnimLens("p1",1,1,0,0,1); |
| AnimLens("p2",.5,2,0,0,1); |
| AnimLens("p3",.25,3,0,0,1); |
| AnimLens("p4",1,8,0,0,1); |
| AnimLens("p5",.5,-2,0,0,1); |
| AnimLens("p6",.25,-4,0,0,1); |
| AnimLens("p7",.2,-5.5,0,0,1); |
| AnimLens("p8",3.375,-1,40,120,1.33); |
| setTimeout(LensFlare,16); |
| } |
| function AnimLens(Lens,iScale,dist,x,y,r){ |
| var vxv = (cx - px) / dist; |
| var vyv = (cy - py) / dist; |
| var d = dim * iScale; |
| css = document.getElementById(Lens).style; |
| css.top = Math.round(vyv - ((d / r) * .5) + cy + y)+'px'; |
| css.left = Math.round(vxv - (d * .5) + cx + x)+'px' |
| css.width = Math.round(d)+'px' |
| css.height = Math.round(d / r)+'px' |
| } |
| function resize() { |
| cx = document.body.offsetWidth * .5; |
| cy = document.body.offsetHeight * .5; |
| } |
| onresize = resize; |
| document.onmousemove = function(e){ |
| if (window.event) e = window.event; |
| lx = (e.x || e.clientX); |
| ly = (e.y || e.clientY); |
| } |
| onload = function() { |
| resize(); |
| lx = cx / 2; |
| ly = cy / 2; |
| LensFlare(); |
| } |
| </script> |
| </head> |
| <body> |
| <div id=img style="position: absolute;"> |
| <img id="p8" src="../images/mars2.jpg" style="position:absolute;left:-1000px"> |
| <img id="p1" class="alpha" src="../images/lf2.gif"> |
| <img id="p2" class="alpha" src="../images/lf1.gif"> |
| <img id="p3" class="alpha" src="../images/lf3.gif"> |
| <img id="p4" class="alpha" src="../images/lf2.gif"> |
| <img id="p5" class="alpha" src="../images/lf1.gif"> |
| <img id="p6" class="alpha" src="../images/lf1.gif"> |
| <img id="p7" class="alpha" src="../images/lf3.gif"> |
| </div> |
| </body> |
| </html> |
