Direct Link
Source code
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>recorded conversations - 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: #000; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| filter: alpha(opacity=100); |
| } |
| #screen { |
| position:absolute; |
| left: 10%; |
| top: 1%; |
| width: 80%; |
| height: 98%; |
| background: #000; |
| overflow: hidden; |
| visibility: hidden; |
| } |
| .ref { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| cursor: default; |
| } |
| .prx { |
| position: absolute; |
| color: #FFF; |
| font-family: verdana, arial, helvetica, sans-serif; |
| font-size: 14px; |
| overflow: hidden; |
| } |
| .link { |
| font-size: 16px; |
| text-align: center; |
| } |
| .text { |
| background: #111; |
| border: #fff solid 1px; |
| padding: 5px; |
| } |
| </style> |
| <!-- images_loading_bar --> |
| <link href="library/images_loading_bar.css" rel="stylesheet" type="text/css"> |
| <!-- dhteumeuleu utilities --> |
| <script type="text/javascript" src="library/dhteumeuleu.js"></script> |
| <script type="text/javascript"> |
| // ================================================== |
| // ===== 3D parallax navigator ==== |
| // script written by Gerard Ferrandez - January 2007 |
| // http://www.dhteumeuleu.com |
| // ================================================== |
| var prx = { |
| cx : 0, |
| cy : 0, |
| X : 0, |
| Y : 0, |
| CX : 0, |
| CY : 0, |
| FO : 6, // focal |
| RS : .05, // speed |
| RC : 1, |
| /* ==== mouse move event ==== */ |
| mousemove : function (e) { |
| if (window.event) e = window.event; |
| prx.xm = (e.x || e.clientX) - prx.nx + (prx.nw * .5); |
| prx.ym = (e.y || e.clientY) - prx.ny + (prx.nh * .5); |
| }, |
| /* ==== window resize event ==== */ |
| resize : function () { |
| prx.nx = pxLeft(prx.scr); |
| prx.ny = pxTop(prx.scr); |
| prx.nw = prx.scr.offsetWidth; |
| prx.nh = prx.scr.offsetHeight; |
| }, |
| /* ==== main loop ==== */ |
| run : function () { |
| /* ==== mouse soften ==== */ |
| prx.cx += (prx.xm - prx.cx) * (prx.RS * 2 * prx.RC); |
| prx.cy += (prx.ym - prx.cy) * (prx.RS * 2 * prx.RC); |
| /* ==== goto soften ==== */ |
| prx.CX += (prx.X - prx.CX) * (prx.RS * prx.RC); |
| prx.CY += (prx.Y - prx.CY) * (prx.RS * prx.RC); |
| /* ==== prx move ==== */ |
| for (var i = 0; i < prx.N; i++) { |
| var o = prx.spa[i]; |
| o.style.left = px(o.m + prx.nw * .5 + (o.X - prx.cx * .5 - prx.CX) * o.d); |
| o.style.top = px(o.m + prx.nh * .5 + (o.Y - prx.cy * .5 - prx.CY) * o.d); |
| } |
| setTimeout(prx.run, 16); |
| }, |
| /* ==== init script ==== */ |
| init : function (container) { |
| this.scr = id(container); |
| this.ref = {}; |
| this.spa = []; |
| var k = 0; |
| var r = this.scr.childNodes; |
| for (var i = 0, n = r.length; i < n; i++) { |
| /* ==== for each group ==== */ |
| var o = r[i]; |
| if (o.id) { |
| /* ==== save coordinates ==== */ |
| var X = o.offsetLeft; |
| var Y = o.offsetTop; |
| this.ref[o.id] = {}; |
| this.ref[o.id].X = X; |
| this.ref[o.id].Y = Y; |
| this.ref[o.id].W = o.offsetWidth; |
| this.ref[o.id].H = o.offsetHeight; |
| o.style.position = 'static'; |
| var c = o.getElementsByTagName('*'); |
| for (var j = 0, m = c.length; j < m; j++) { |
| /* ==== for each parallax object [class="prx"] ==== */ |
| if (c[j].className.indexOf('prx') >= 0) { |
| var s = this.spa[k] = c[j]; |
| /* ==== zIndex = parallax level ==== */ |
| s.Z = s.style.zIndex; |
| s.d = Math.min(prx.FO, prx.FO / (prx.FO + 1 - s.Z)); |
| /* ==== x,y coordinates - group + local ==== */ |
| s.X = X + s.offsetLeft; |
| s.Y = Y + s.offsetTop; |
| /* ==== zoom factor (% sizes only) ==== */ |
| s.W = s.offsetWidth * ((!s.style.width || s.style.width.indexOf('px') > 0) ? 1 : s.d); |
| s.H = s.offsetHeight * ((!s.style.height || s.style.width.indexOf('px') > 0) ? 1 : s.d); |
| s.style.width = px(s.W); |
| s.style.height = px(s.H); |
| /* ==== buttons/links ==== */ |
| if(s.onclick) { |
| s.style.cursor = 'pointer'; |
| s.style.zIndex = 100; |
| s.onmouseover = function() { |
| this.m = 2; |
| prx.RC = .5; |
| } |
| s.onmouseout = function() { |
| this.m = 0; |
| prx.RC = 1; |
| } |
| } |
| /* ==== navigation functions ==== */ |
| s.goto = function (o, ret) { |
| prx.RC = 1; |
| if (!ret) id(o).O = this.oid; |
| id(o).style.visibility = 'visible'; |
| prx.X = prx.ref[o].X - .5 * (prx.nw - prx.ref[o].W); |
| prx.Y = prx.ref[o].Y - .5 * (prx.nh - prx.ref[o].H); |
| } |
| s.ret = function () { |
| this.goto(this.p.O, true); |
| } |
| s.hide = function () { |
| setTimeout('id("' + this.oid + '").style.visibility = "hidden";', 500); |
| } |
| s.oid = o.id; |
| s.p = o; |
| s.m = 0; |
| k++; |
| } |
| } |
| } |
| } |
| this.N = this.spa.length; |
| /* ==== resize & mouse events ==== */ |
| addEvent(window, 'resize', this.resize); |
| addEvent(window.document, 'mousemove', this.mousemove); |
| /* ==== start ==== */ |
| this.resize(); |
| this.xm = this.nw; |
| this.ym = this.nh; |
| this.scr.style.visibility = 'visible'; |
| this.run(); |
| } |
| } |
| onload = function() { |
| /* ==== init ==== */ |
| setTimeout("prx.init('screen')", 500); |
| } |
| </script> |
| </head> |
| <body> |
| <div id="screen"> |
| <!-- main --> |
| <div id="pan1" class="ref" style="left:0%;top:0%"> |
| <img alt="" src="../images/poser3.jpg" class="prx" style="left:0%;top:0%;z-index:0"> |
| <div class="prx" style="left:0%;top:30%;width:100%;z-index:2;color:#fff;font-size:128px;font-weight:bold;text-align:center">para<span style="visibility:hidden">ll</span>ax</div> |
| <div class="prx" style="left:6%;top:26%;width:100%;z-index:3;color:#ab843f;font-size:196px;font-weight:bold;text-align:center">ll</div> |
| <div class="prx link" onclick="this.goto('pan4');" style="left:20%;top:15%;width:150px;z-index:1"><img alt="" src="../images/r.gif"> Intermediators</div> |
| <div class="prx link" onclick="this.goto('pan3');" style="left:70%;top:10%;width:151px;z-index:1"><img alt="" src="../images/r.gif"> Artfully</div> |
| <div class="prx link" onclick="this.goto('pan2');" style="left:60%;top:80%;width:150px;z-index:1"><img alt="" src="../images/r.gif"> Average conflict</div> |
| </div> |
| <!-- Artfully --> |
| <div id="pan3" class="ref" style="left:120%;top:-150%"> |
| <img alt="" src="../images/poser5.jpg" class="prx" style="left:0%;top:0%;z-index:1"> |
| <img alt="" src="../images/poser5.gif" class="prx" style="left:50%;top:30%;z-index:3"> |
| <div class="prx link" onclick="this.goto('pan5');" style="left:80%;top:10%;width:100px;z-index:2"><img alt="" src="../images/r.gif"> series production</div> |
| <div class="prx" style="left:20%;top:30%;width:100%;z-index:2;color:#fff;font-size:128px;font-weight:bold;">3D</div> |
| <div class="prx" style="left:30%;top:80%;width:40%;z-index:2"> |
| Enemy androids were piled in trucks, their arms and legs artfully displayed. |
| </div> |
| <img alt="" onclick="this.ret();" src="../images/arrows.gif" class="prx" style="left:35%;top:60%;z-index:4"> |
| </div> |
| <!-- android --> |
| <div id="pan5" class="ref" style="left:250%;top:-250%"> |
| <img alt="" src="../images/poser6.jpg" class="prx" style="left:0%;top:0%;z-index:1"> |
| <div class="prx" style="left:0%;top:50%;width:100%;z-index:3;color:#fff;font-size:64px;font-weight:bold;text-align:center">interactive</div> |
| <div class="prx" style="left:40%;top:70%;width:40%;z-index:2"> |
| Humanoid prototyping for visualization |
| </div> |
| <img alt="" onclick="this.ret();" src="../images/arrows.gif" class="prx" style="left:35%;top:60%;z-index:4"> |
| </div> |
| <!-- intermediators --> |
| <div id="pan4" class="ref" style="left:-150%;top:-100%"> |
| <img alt="" src="../images/poser.gif" class="prx" style="left:20%;top:35%;width:20%;height:80%;z-index:0"> |
| <img alt="" src="../images/poser.gif" class="prx" style="left:60%;top:35%;width:20%;height:80%;z-index:0"> |
| <img alt="" src="../images/poser.gif" class="prx" style="left:20%;top:35%;width:20%;height:80%;z-index:1"> |
| <img alt="" src="../images/poser.gif" class="prx" style="left:60%;top:35%;width:20%;height:80%;z-index:1"> |
| <img alt="" src="../images/poser2.gif" class="prx" style="left:37%;top:35%;width:26%;height:80%;z-index:1"> |
| <img alt="" src="../images/poser.gif" class="prx" style="left:20%;top:35%;width:20%;height:80%;z-index:2"> |
| <img alt="" src="../images/poser.gif" class="prx" style="left:60%;top:35%;width:20%;height:80%;z-index:2"> |
| <div class="prx" style="left:30%;top:85%;width:40%;z-index:3"> |
| Until everything can be revealed, something that has happened in the past few days. We are happy to include several men among our galactic crowd. |
| </div> |
| <img alt="" onclick="this.ret();" src="../images/arrowr.gif" class="prx" style="left:70%;top:70%;z-index:4"> |
| </div> |
| <!-- Average conflict --> |
| <div id="pan2" class="ref" style="left:150%;top:100%"> |
| <img alt="" src="../images/apres_midi_dun_faune.jpg" class="prx" style="left:0%;top:0%;width:100%;height:100%;z-index:1"> |
| <div class="prx link" onclick="this.goto('text1');" style="left:30%;top:30%;width:100px;z-index:2"><img alt="" src="../images/r.gif"> Hear</div> |
| <div class="prx link" onclick="this.goto('text2');" style="left:50%;top:20%;width:100px;z-index:2"><img alt="" src="../images/r.gif"> The worlds</div> |
| <div class="prx link" onclick="this.goto('text3');" style="left:60%;top:65%;width:100px;z-index:2"><img alt="" src="../images/r.gif"> Doing science</div> |
| <img alt="" onclick="this.ret();" src="../images/arrows.gif" class="prx" style="left:35%;top:55%;z-index:3"> |
| </div> |
| <div id="text1" class="ref" style="left:120%;top:20%;width:100%;height:100%;visibility:hidden"> |
| <div class="prx text" style="left:25%;top:25%;width:25%;height:50%;z-index:1"> |
| We checked in, heard their demands; then we tried to respond to them.<br><br>We couldn't question the authenticity of the problem,<br>thought there were a plethora of inconsistencies in their pleas.<br><br><span style="font-size:24px;font-weight:bold">Difficult</span> to check out. |
| </div> |
| <img alt="" onclick="this.hide();this.ret();" src="../images/arrowr.gif" class="prx" style="left:45%;top:65%;z-index:2;"> |
| </div> |
| <div id="text2" class="ref" style="left:200%;top:30%;width:100%;height:100%;visibility:hidden"> |
| <div class="prx text" style="left:25%;top:25%;width:25%;height:50%;z-index:1"> |
| You can build all the worlds you want, but the best security can't be observed.<br><br>You are <span style="font-size:24px;font-weight:bold">committed</span> to accept risks. |
| </div> |
| <img alt="" onclick="this.hide();this.ret();" src="../images/arrows.gif" class="prx" style="left:35%;top:60%;z-index:2"> |
| </div> |
| <div id="text3" class="ref" style="left:200%;top:180%;width:100%;height:100%;visibility:hidden"> |
| <div class="prx text" style="left:25%;top:25%;width:25%;height:50%;z-index:1"> |
| All of these people are doing science, it seems to me.<br><br>You <span style="font-size:24px;font-weight:bold">need</span> to be able to do that for more than a handful of papers. |
| </div> |
| <img alt="" onclick="this.hide();this.ret();" src="../images/arrows.gif" class="prx" style="left:35%;top:60%;z-index:2"> |
| </div> |
| </div> |
| <!-- images_loading_bar --> |
| <script type="text/javascript" src="library/images_loading_bar.js"></script> |
| </body> |
| </html> |
Recent Comments
October 1, 2011 (12:37)
June 27, 2011 (12:18)
June 24, 2010 (11:46)