<HTML>
<head>
<title>The Scroll/Credits demo</title>
<script>
////////////////////////////////////////////////////////////////////////////////
// Produced by Marcio Galli for Netscape Communications.
// Uses DOM 1 to dynamically create a set of text elements.
// Then animates it producing a scroll effect.
//
// 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
//
creditList= new Array(
"DOM 1 Scroll Effect",
"",
"by mgalli",
"",
"Component of",
"DOM/CSS Font Family Demos",
"",
"starring",
"DOM Level 1",
"DOM Level 2",
"JavaScript",
"Cascading Style Sheets",
"new W3C Standards",
"Gecko Layout Engine / NGT",
"",
"thanks to",
"mozilla.org",
"geckonnection.com",
"taboca.com",
"netscape.com",
"w3c.org",
"",
"featuring",
"animation",
"visual effects",
"dynamic control",
"dynamic creation",
"and more",
":-)",
"",
"Find more info",
"at",
"DMOZ.ORG [W3C DOM] Category",
"",
"Filmed for the Web",
""
);
//-------------------------------------------------------------------------------------
// start function
//
// This function is called when the page is loaded.
// See the onload="start()" attribute in the body tag.
//
function start() {
nodeCredits=document.getElementById("credits");
ww=window.innerWidth; // ww receives the window.innerWidth
hh=window.innerHeight; // hh receives the window.innerHeight
createDivs(creditList);
// Note: the height attribute have the size of the screen height area.
// Also the overflow attribute is set to hidden.
//
if (navigator.userAgent.indexOf("Gecko")>-1)
nodeCredits.setAttribute("style","position:absolute;top:"+hh+"px;left:0px;width:"+ww+";height:"+0+";font-size:15px;overflow:hidden;");
else
nodeCredits.style.cssText = "position:absolute;top:"+hh+"px;left:0px;width:"+ww+";height:"+0+";font-size:15px;overflow:hidden;";
o1=document.getElementById("credits");
scroll();
}
/////////////////////////////////////////////////////////////////////////////////
// Global variables used for the scroll animation
//
o1=null; // stores the object reference.
ttt=0; // stores position.
hhh=0; // stores position.
hh=0; // window.innerHeight size.
/////////////////////////////////////////////////////////////////////////////////
// Scroll first step 20/1000*second. It moves the top position for the o1
// element and call scroll2...
//
function scroll() {
ttt=parseInt(o1.style.top);
if (isNaN(ttt))
ttt = 0;
ttt-=2;
o1.style.top=ttt+"px";
setTimeout("scroll2()",20);
}
precounter=0; // aux counter.
fadeout_on=false; // aux Flag.
fadein_on=false; // aux Flag
iid=0; // aux used to index elements.
iii=0; // aux generic counter
iii2=0; // aux generic counter
iid2=0; // aux used to index elements.
ccc=0; // aux used to set color
ccc2=255; // aux used to set color
/////////////////////////////////////////////////////////////////////////////////
// Scroll second step 20/1000*second. It increases the height size for the o1
// element and call scroll...
//
// This second scroll function takes care of the fade in and fade out color
// effect.
//
function scroll2() {
// Increases the size of the height property.
//
hhh=parseInt(o1.style.height);
if (isNaN(hhh))
hhh = 0;
hhh+=2;
o1.style.height=hhh+"px";
//////////////////////////////////////////////////////////////////////////
// Now is the color that works with color to simulate a fade in / fade out
// effect.
// Wait twenty cicles to start fading in.
//
precounter++;
if(precounter>20) {
fadein_on=true;
}
// If fadein mode is on,
//
if(fadein_on) {
// must verify if the element is valid.
//
if(iid<creditList.length) {
// Gets the element..
pieceofText=document.getElementById("textobject"+iid);
// Changes the color (ccc from 000 to 255..)
pieceofText.style.color="rgb("+ccc+","+ccc+","+ccc+")";
ccc+=17;
}
// increases one fadein cycle.
iii++;
// Each 15 cycles, next element must fade in...
if(iii>15) {
iii=0; // fade in cycle counter=0
ccc=0; // resets color to 0
iid++; // next element index.
}
}
// Same thing but now for the fadeout system.
// Waits the first element to be next to the top to start fadeing out.
//
o1top=parseInt(o1.style.top);
if (isNaN(o1top))
o1top = 0;
if(o1top<(60)&&fadeout_on==false) {
fadeout_on=true;
}
// So...
if(fadeout_on) {
// must verify if the element is valid.
//
if(iid2<=creditList.length) {
pieceofText2=document.getElementById("textobject"+iid2);
if (pieceofText2)
pieceofText2.style.color="rgb("+ccc2+","+ccc2+","+ccc2+")";
ccc2-=17; // decreases the color value.
}
iii2++; // increases the fade out cycle
// counter.
if(iii2>15) { // When number of cycles is 15,
iid2++; // set index to next element.
ccc2=255; // reset color to 255.
iii2=0; // reset cycle counter to 0.
}
}
// warning bug - it continues scrolling forever.
setTimeout("scroll()",20);
}
//////////////////////////////////////////////////////////////////////////////
// Creates credit divs inside credits div.
//
ii=0;
function createDivs(list) {
node=document.getElementById("credits");
toppos=0;
beforediv2=document.createElement("CENTER");
node.appendChild(beforediv2);
for(i=0;i<list.length;i++) {
beforediv=document.createElement("DIV");
if (navigator.userAgent.indexOf("Gecko")>-1)
beforediv.setAttribute("style","position:relative;color:black;font-size:20px");
else
beforediv.style.cssText = "position:relative;color:black;font-size:20px";
beforediv.setAttribute("id","textobject"+ii);
ii++
insidediv=document.createTextNode(list[i]);
beforediv.appendChild(insidediv);
insidediv=document.createElement("BR");
beforediv.appendChild(insidediv);
beforediv2.appendChild(beforediv);
}
}
</script>
</head>
<body onload="start()" bgcolor="black" color="white">
<div id="credits" style="position:absolute;color:white">
</div>
</body>
</HTML>