<html>
<head>
<title>DOM Level 1 - Exotic Demos - The Dynamic 3D Text Illusion</title>
<script>
////////////////////////////////////////////////////////////////////////////////
// Produced by Marcio Galli for Netscape Communications.
// Uses DOM 1 to dynamically create a set of text elements using
// the same content for all the texts, but with different sizes.
//
// Each vertical slice that you see in the demo
// comes from a text with a clipped area.
//
// The demo uses DOM Level 1 to create the text elements dynamically and
// change style property. References:
//
// http://www.mozilla.org/docs/dom/technote/tn-dom-table/index.html
// http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/
// http://www.geckonnection.com
//
var clipright=853; // Right margin clipped area.
var clipleft=2; // Left margin clipped area.
var fontsize=40; // Font size.
var posleft=50; // Initial left position.
var postop=200; // Initial top position.
var defaultString="gecko!"; // Default string.
parentID="area"; // parent div element where the images
// will be created.
// The generator function for creating all text elements inside divs.
function generator() {
// 90 texts are created...
for(i=0;i<90;i++) {
// node represents the area whose div
// elements include the text that will be created.
//
node=document.getElementById(parentID);
// Creates a div.
beforediv=document.createElement("DIV");
// Prepares the attribute string using postop, posleft, clipright and clipleft.
str="position:absolute;top:"+postop+"px;left:"+posleft+"px;width:860px;height:600px;font-size:"+fontsize+"pt;clip:rect(0px,"+clipright+"px,0px,"+clipleft+"px);overflow:hidden;";
// Sets the style attribute with the created str.
beforediv.setAttribute("style",str);
// Sets the id name.
beforediv.setAttribute("id","object"+i);
// Creates the text node.
newText=document.createTextNode(defaultString);
// Appends the new created text as a child of the the new div element.
beforediv.appendChild(newText);
// Appends the new created div element as a child of the area div.
node.appendChild(beforediv);
// Defines correct positioning for the next iteration...
// Try changing the approach. :-)
// // Approach one
// clipright-=9;
// clipleft+=9;
// fontsize+=4;
// posleft-=5;
// postop-=4;
// Approach two
clipright-=9+((i/90)*10);
clipleft+=9+((i/90)*10);
fontsize+=4-((i/90)*3);
posleft-=(4+((i/90)*10));
postop-=4;
// Approach three
// clipright-=8;
// clipleft+=8;
// fontsize+=4;
// posleft-=5;
// postop-=4;
}
}
//
// start function. This function is called in the onload event in the body tag.
//
function start() {
setTimeout("anim()",dec);
}
///////////////////////////////////////////////////////////////////////////////////
// Now the animation. This is the animation of the panel in which the user types
// the text string. Note that the panel comes from the top, then opens the window
// to edit. After user hits enter the pane closes and goes back to the top. At this
// point, the generator function is called.
//
// This procedure uses DOM and CSS to set positioning
// and hide/show state for div elements. The generator function in the top of
// the source code uses DOM Level 1 functions to create new HTML elements dynamically.
//
dec=20; // Global variable used for the animation.
// ------------------------- animation 1 part 1/2 ---------------------------------
// First step of the animation procedure.
// Animates the pane from the top to the correct position.
function anim() {
// The dec counter is initialized with 20. This number is decreased by
// one for each iteration until it reaches 0.
dec--;
if(dec>0) {
yy=parseInt(document.getElementById("lw").style.top);
// NOTE that the top position is based on the dec counter.
// This is to make a gradual slowing effect. The velocity is decreased for
// each iteration. :-)
tt=yy+dec;
document.getElementById("lw").style.top=tt+"px";
setTimeout("anim()",dec);
} else {
// End the first animation, then call the second animation,
// initializing the dec counter to 13.
//
dec=13;
setTimeout("anim2()",dec);
}
}
// ------------------------- animation 1 part 2/2 ---------------------------------
// Second step of the animation procedure.
// Animates the left and right sub panes. Open.
//
function anim2() {
// The dec counter is initialized with 13. This number is decreased by
// one for each iteration until it reaches 0. Same process again, but now,
// the code is animating the left and right sub panes.
//
dec--;
if(dec>0) {
x1=parseInt(document.getElementById("balll").style.left);
x2=parseInt(document.getElementById("ballr").style.left);
document.getElementById("balll").style.left=x1-dec+"px";
document.getElementById("ballr").style.left=x2+dec+"px";
setTimeout("anim2()",dec);
} else {
// The form (which includes the text field) is positioned
// in the correct place. The form was hidden in the -200
// position.
//
// Note: This is not the best way to hide an element. You can
// hide / unhide with style also.
//document.getElementById("areaform").style.visibility="visible";
document.getElementById("areaform").style.left="225px";
}
}
// Lognow function starts the reverse of the anim1 and anim2 function by
// starting the anim3 and anim4 animation process.
//
function lognow() {
// sets the dec
dec=13;
// hides the form.
document.getElementById("areaform").style.visibility="hidden";
// start log now animation..
setTimeout("anim3()",dec);
}
// ------------------------- animation 2 part 1/2 ---------------------------------
// First step of the animation procedure.
// Animates the left and right sub panes. Closes.
//
function anim3() {
// The reverse animation of the anim2
dec--;
if(dec>0) {
x1=parseInt(document.getElementById("balll").style.left);
x2=parseInt(document.getElementById("ballr").style.left);
document.getElementById("balll").style.left=x1+dec+"px";
document.getElementById("ballr").style.left=x2-dec+"px";
setTimeout("anim3()",dec);
}
else {
dec=24;
setTimeout("anim4()",dec);
}
}
// ------------------------- animation 2 part 2/2 ---------------------------------
// Second step of the animation procedure.
// Animates the pane from the top to the correct position.
//
function anim4() {
// This is the reverse animation of anim1.
dec--;
if(dec>0) {
yy=parseInt(document.getElementById("lw").style.top);
tt=yy-dec;
document.getElementById("lw").style.top=tt+"px";
setTimeout("anim4()",dec);
} else {
// Sets the value of defaultString with textfield at the end
defaultString=document.forms[0].login.value;
// Calls generator to generate the characters.
generator();
}
}
</script>
</head>
<body bgcolor="white" onload="start()">
<ul><ul><ul><ul><ul><ul>enter your ID in the test field to log in!!! I mean -- your name!! :-)
<div id="area" style="position:absolute;left:100px;top:100px;">
</div>
<div id="lw" style="position:absolute;top:-90px;left:-105px;">
<div id="ballr" style="position:absolute;left:83px;top:0px">
<a href="" onclick="lognow();return false;">
<img src="ballright.jpg" border=0></a>
</div>
<div id="balll" style="position:absolute;left:0px;top:1px">
<a href="" onclick="lognow();return false;"><img src="ballleft.jpg" border=0></a>
</div>
<div id="areaform" style="position:absolute;left:-225px;top:20px">
<form name="f" onsubmit="lognow();return false;" style="width:100px;height:20px">
<input type=text name="login" value="gecko!" size=7>
</form>
</div>
<div id="helix" style="position:absolute;left:240px;top:-205px">
<img src="helix.gif">
</div>
</div>
</body>
</html>