| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <title>in absence - 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 { |
| position: absolute; |
| margin: 0px; |
| padding: 0px; |
| background: #111; |
| width: 100%; |
| height: 100%; |
| } |
| #screen { |
| position: absolute; |
| left: 0%; |
| top: 0%; |
| width: 100%; |
| height: 100%; |
| background: #000; |
| background-image: url("../images/bkp1.png"); |
| overflow:hidden; |
| } |
| #screen .gridSpan { |
| position: absolute; |
| overflow: hidden; |
| background: #000; |
| padding: 0px; |
| margin: 0px; |
| } |
| #screen .pageHTML { |
| position: absolute; |
| color: #eee; |
| font-family: verdana; |
| font-size: 1.1em; |
| width: 500px; |
| height: 333px; |
| background-image: url("../images/stripe5.png"); |
| filter: alpha(opacity=100); |
| } |
| .abs { |
| position: absolute; |
| } |
| #screen .pageHTML H2 { |
| position: relative; |
| margin: 8px; |
| cursor: pointer; |
| } |
| .sourceHTML { |
| visibility: hidden; |
| } |
| #screen .text { |
| margin: 30px; |
| padding: 30px; |
| text-align: justify; |
| } |
| #screen a { |
| position: relative; |
| border: none; |
| text-decoration: none; |
| } |
| #screen a:hover { |
| left:1px; |
| top:1px; |
| } |
| #screen img { |
| border: none; |
| cursor: pointer; |
| } |
| |
| </style> |
| |
| <script type="text/javascript"> |
| // ================================================================= |
| // ===== grid-html ===== |
| // Script written by Gerard Ferrandez - January 9, 2009 |
| // http://www.dhteumeuleu.com |
| // license: CC-BY-NC - do not remove this notice |
| // ----------------------------------------------------------------- |
| // texts by Pola |
| // All sounds and images are credited to their respective authors |
| // ================================================================= |
| |
| |
| /* ==== Easing function ==== */ |
| function Ease (position) { |
| this.position = position; |
| } |
| Ease.prototype = { |
| // ---- ease ---- |
| ease : function () { |
| if (this.m == 0 && this.s == -1) { |
| this.moving = false; |
| return this.position; |
| } |
| this.moving = true; |
| this.m += this.s; |
| this.position += (this.d * this.m * .0025); |
| if (this.m == 20) this.s = -1; |
| return this.position; |
| }, |
| // ---- set target value ---- |
| setTarget : function (target) { |
| this.target = target; |
| this.m = 0; |
| this.s = 1; |
| this.d = target - this.position; |
| } |
| } |
| |
| var grid = { |
| // ---- variables ---- |
| O : [], |
| M : [], |
| D : {}, |
| screen : { |
| w : 0, |
| h : 0 |
| }, |
| m : false, |
| moving: false, |
| |
| /* ==== create HTML Elements ==== */ |
| createHTML : function (id, x, y) { |
| // ---- resizable container ---- |
| var o = document.createElement('span'); |
| o.className = 'gridSpan'; |
| var p = document.getElementById(id); |
| // ---- injection from HTML source ---- |
| if (p) o.innerHTML = p.innerHTML; |
| grid.screen.obj.appendChild(o); |
| // ---- variables ---- |
| grid.O.push(o); |
| o.m = false; |
| o.X = x; |
| o.Y = y; |
| o.c = o.childNodes[o.firstChild.nodeType == 3 ? 1 : 0] |
| if (!grid.M[y]) grid.M[y] = []; |
| grid.M[y][x] = o; |
| grid.D[id] = o; |
| // ---- create easing params ---- |
| o.w = new Ease(10); |
| o.h = new Ease(10); |
| o.x = new Ease(grid.screen.w / 2); |
| o.y = new Ease(grid.screen.h / 2); |
| |
| /* ==== click event ==== */ |
| o.onmousedown = function (e) { |
| if (window.event) e = window.event; |
| var tg = (e.target) ? e.target : e.srcElement; |
| // ---- different div ---- |
| if (this != grid.m) { |
| if (grid.m) grid.m.m = false; |
| grid.m = this; |
| grid.position(); |
| } else { |
| // ---- same div - protect clicks ---- |
| if ((tg.tagName == "IMG" || tg.className.indexOf('click') >= 0) && tg.parentNode.tagName != "A") { |
| grid.m = false; |
| grid.position(); |
| } |
| } |
| return false; |
| } |
| |
| /* ==== HTML rendering ==== */ |
| o.animate = function () { |
| var o = this.style; |
| o.left = Math.round(this.x.ease()) + 'px'; |
| o.top = Math.round(this.y.ease()) + 'px'; |
| o.width = Math.round(this.w.ease()) + 'px'; |
| o.height = Math.round(this.h.ease()) + 'px'; |
| // ---- moving or not moving that's the question ---- |
| if (this.x.moving || this.y.moving) grid.moving = true; |
| } |
| }, |
| |
| /* ==== init script ==== */ |
| init : function (ids, marg, nw, nh) { |
| this.screen.obj = document.getElementById('screen'); |
| this.ids = ids; |
| this.H = ids.length; |
| this.L = 0; |
| // ---- dimensions ---- |
| this.marg = marg; |
| this.nw = nw; |
| this.nh = nh; |
| this.resize(); |
| // ---- click on background event ---- |
| this.screen.obj.onmousedown = function (e) { |
| if (window.event) e = window.event; |
| var tg = (e.target) ? e.target : e.srcElement; |
| if (tg.id == "screen") { |
| grid.m = false; |
| grid.position(); |
| } |
| return false; |
| } |
| }, |
| |
| /* ==== build structure ==== */ |
| structure : function () { |
| for (var i = 0; i < this.H; i++) this.L = Math.max(this.L, this.ids[i].length); |
| for (var i = 0; i < this.H; i++) { |
| var l = this.ids[i]; |
| for (var j = 0; j < l.length; j++) { |
| var id = l[j]; |
| if (id) this.createHTML(id, j, i); |
| } |
| } |
| // ---- Init complete ---- |
| grid.init = false; |
| this.resize(); |
| }, |
| |
| /* ==== set position targets ==== */ |
| position : function () { |
| // ---- collapsed position ---- |
| var x = (grid.screen.w - (grid.L * grid.nw)) / 2; |
| var y = (grid.screen.h - (grid.H * grid.nh)) / 2; |
| var i = 0, o; |
| while( o = grid.O[i++] ) { |
| o.w.setTarget(grid.nw - grid.marg); |
| o.h.setTarget(grid.nh - grid.marg); |
| o.x.setTarget(x + grid.marg + o.X * grid.nw); |
| o.y.setTarget(y + grid.marg + o.Y * grid.nh); |
| } |
| // ---- expanded div ---- |
| if (grid.m) { |
| // ---- expanded position ---- |
| grid.m.w.setTarget(grid.m.c.offsetWidth); |
| grid.m.h.setTarget(grid.m.c.offsetHeight); |
| grid.m.x.setTarget(grid.marg + (grid.screen.w - grid.m.w.target) / 2); |
| grid.m.y.setTarget(grid.marg + (grid.screen.h - grid.m.h.target) / 2); |
| // ---- bottom y ---- |
| var y = grid.m.y.target; |
| for (var i = grid.m.Y; i < grid.H; i++) { |
| for (var j = 0; j < grid.L; j++) { |
| var o = grid.M[i][j]; |
| if (o) o.y.setTarget(y); |
| } |
| y += grid.nh; |
| } |
| // ---- top y ---- |
| var y = grid.m.y.target - grid.nh; |
| for (var i = grid.m.Y - 1; i >= 0; i--) { |
| for (var j = 0; j < grid.L; j++) { |
| var o = grid.M[i][j]; |
| if (o) o.y.setTarget(y); |
| } |
| y -= grid.nh; |
| } |
| // ---- right x y ---- |
| var y = grid.m.y.target + grid.m.h.target + grid.marg; |
| for (var i = 0; i < grid.H; i++) { |
| var o = grid.M[i][grid.m.X]; |
| if (o) { |
| o.x.setTarget(grid.m.x.target); |
| if (i > grid.m.Y) { |
| o.y.setTarget(y); |
| y += o.h.target + grid.marg; |
| } |
| } |
| } |
| // ---- left x ---- |
| var x = grid.m.x.target - grid.nw; |
| for (var i = grid.m.X - 1; i >= 0; i--) { |
| for (var j = 0; j < grid.H; j++) { |
| var o = grid.M[j][i]; |
| if (o) o.x.setTarget(x); |
| } |
| x -= grid.nw; |
| } |
| // ---- right x ---- |
| var x = grid.m.x.target + grid.m.w.target + grid.marg; |
| for (var i = grid.m.X + 1; i < grid.L; i++) { |
| for (var j = 0; j < grid.H; j++) { |
| var o = grid.M[j][i]; |
| if (o) o.x.setTarget(x); |
| } |
| x += grid.nw; |
| } |
| } |
| // ---- start animation if not already running ---- |
| if (!grid.sid) grid.sid = setInterval(grid.run, 32); |
| }, |
| |
| /* ==== goto id ==== */ |
| goto : function (id) { |
| if (grid.D[id]) { |
| if (grid.m) grid.m.m = false; |
| grid.m = grid.D[id]; |
| grid.position(); |
| } |
| }, |
| |
| /* ==== resize event ==== */ |
| resize : function () { |
| var o = grid.screen.obj; |
| if (o && o.offsetWidth) { |
| grid.screen.h = o.offsetHeight - grid.marg; |
| grid.screen.w = o.offsetWidth - grid.marg; |
| // ---- step 1: DOM loaded - step 2: createHTML - step 3: resize ---- |
| if (!grid.init) grid.position(); else grid.structure(); |
| } else setTimeout(grid.resize, 32); |
| }, |
| |
| /* ==== main loop ==== */ |
| run : function () { |
| // ---- divs ---- |
| grid.moving = false; |
| var i = 0, o; |
| while( o = grid.O[i++] ) o.animate(); |
| // ---- scroll background ---- |
| grid.screen.obj.style.backgroundPosition = Math.round(-grid.O[0].x.position * .5) + 'px ' + Math.round(-grid.O[0].y.position * .5) + 'px'; |
| // ---- stop animation if nothing is moving ---- |
| if (!grid.moving && grid.sid) { |
| clearInterval(grid.sid); |
| grid.sid = false; |
| } |
| } |
| } |
| </script> |
| </head> |
| |
| <body> |
| |
| <div id="screen"></div> |
| |
| <span id="p01" class="sourceHTML"> |
| <div class="pageHTML"> |
| <h2 class="click">From<br>nowhere</h2> |
| <div class="text">I had a sudden vision of a huge object coming toward me from nowhere; I even dodged back to elude the impact, before I understood there was nothing there. |
| <br><br><a href="#" onclick="grid.goto('p02');return false;"><img src="../images/Red_Arrow_Down.gif" alt=""></a></div> |
| </div> |
| </span> |
| <span id="p0A" class="sourceHTML"> |
| <div class="pageHTML"> |
| <h2 class="click">Connected<br>path</h2> |
| <div class="text">Stairs, as in the great people filter. Now take an inferential staircase, evolution: successful changes form a long, connected path, upwards to complexity, where the view is improved as you climb up. |
| <br><br><a href="#" onclick="grid.goto('p03');return false;"><img src="../images/Red_Arrow_Left.gif" alt=""></a></div> |
| </div> |
| </span> |
| <span id="p02" class="sourceHTML"> |
| <img src="../images/ct15.jpg" class="abs" alt=""> |
| </span> |
| <span id="p03" class="sourceHTML"> |
| <img src="../images/or24.jpg" class="abs" alt=""> |
| </span> |
| <span id="p04" class="sourceHTML"> |
| <div class="pageHTML"> |
| <h2 class="click">Awake</h2> |
| <div class="text">Unwanted visits. Back from the operating room, the last thing I wanted was for them to know I was already awake. |
| <br><br><a href="#" onclick="grid.goto('p05');return false;"><img src="../images/Red_Arrow_Right.gif" alt=""></a></div> |
| </div> |
| </span> |
| <span id="p05" class="sourceHTML"> |
| <img src="../images/gr11.jpg" class="abs" alt=""> |
| </span> |
| <span id="p06" class="sourceHTML"> |
| <div class="pageHTML"> |
| <h2 class="click">Abyss</h2> |
| <div class="text">Happiness, as in absence of fear; cold fear, in absence of heat, of light; the abyss of absence. |
| <br><br><a href="#" onclick="grid.goto('p07');return false;"><img src="../images/Red_Arrow_Right.gif" alt=""></a></div> |
| </div> |
| </span> |
| <span id="p07" class="sourceHTML"> |
| <img src="../images/sf02.jpg" class="abs" alt=""> |
| </span> |
| <span id="p08" class="sourceHTML"> |
| <img src="../images/ct76.jpg" class="abs" alt=""> |
| </span> |
| <span id="p09" class="sourceHTML"> |
| <div class="pageHTML"> |
| <h2 class="click">I can't</h2> |
| <div class="text"> |
| Should enjoy the wait. But why should it take so long. Don't make me wait. I can't wait anymore. But you do, don't you, provided that you have confidence. |
| <br><br><a href="#" onclick="grid.goto('p08');return false;"><img src="../images/Red_Arrow_Left.gif" alt=""></a></div> |
| </div> |
| </span> |
| <span id="p10" class="sourceHTML"> |
| <img src="../images/wt10.jpg" class="abs" alt=""> |
| </span> |
| <span id="p11" class="sourceHTML"> |
| <div class="pageHTML"> |
| <h2 class="click">The cage</h2> |
| <div class="text">Around that time, I was under the impression that they saw through me completely. |
| <br><br><a href="#" onclick="grid.goto('p12');return false;"><img src="../images/Red_Arrow_Right.gif" alt=""></a></div> |
| <br><br> |
| </div> |
| </span> |
| <span id="p12" class="sourceHTML"> |
| <img src="../images/or305.jpg" class="abs" alt=""> |
| </span> |
| <span id="p13" class="sourceHTML"> |
| <img src="../images/sf40.jpg" class="abs" alt=""> |
| </span> |
| <span id="p14" class="sourceHTML"> |
| <div class="pageHTML"> |
| <h2 class="click">Hope</h2> |
| <div class="text">Beauty is absence of pain; that you may paint with poetry, spring, hope, motivation, dreams to conform the whole. |
| <br><br><a href="#" onclick="grid.goto('p13');return false;"><img src="../images/Red_Arrow_Left.gif" alt=""></a></div> |
| <br><br> |
| </div> |
| </span> |
| |
| <script type="text/javascript"> |
| /* ==== start the script ==== */ |
| grid.init( |
| [ |
| ['p01', , ,'p0A'], |
| ['p02', ,'p03'], |
| ['p04','p05','p06','p07'], |
| ['p08','p09','p10','p11','p12'], |
| [ ,'p13', , ,'p14'] |
| ], 14, 182, 110 |
| ); |
| onresize = grid.resize; |
| </script> |
| </body> |
| </html> |
| |
Recent Comments
September 3, 2010 (1:01)