<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>