carl2990
04-09-2004, 01:23 PM
Is there any way i can add a timer to either some text or an image so it will 'appear' so long after the page has loaded
and..
is there any way i can stop the letters from dissapearing in this script (and i know the spacing is wrong i changed the lettering :P)
<html>
<head>
<title>The Attic</title>
<meta name="Author" content="Thomas Brattli (webmaster@dhtmlcentral.com)">
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scripts,animationintro,animation,intro,moving,sliding,move,slide,demo,animate,text,letters,">
<meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help.">
<style type="text/css">
.clDivs {position:absolute; width:30px; height:30px; left:0px; font-size:80px; font-weight:bold; font-family:arial black,arial,helvetica,sans-serif; color:#999999; visibility:hidden;}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
AnimationIntro
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/***************************************************************************
Variables to set.
Remember that if you want another font, font-size or whatever you set
that in the .clDivs class in the styletag!
****************************************************************************/
numberOfLetters=11 //How many letters do you have
ypos=-100 //The Y position of the letters, relative to the center
//The x positions of the letters, relative to center.
//This is the tricky part, when you change font-size or type and letters
//be sure to play with the values in this array, if not your letters
//will not arrange correctly. (note the testing variable)
xpos=new Array()
xpos[0] = -200
xpos[1] = -145
xpos[2] = -95
xpos[3] = -20
xpos[4] = 40
xpos[5] = 80
xpos[6] = 120
xpos[7] = 148
xpos[8] = 150
xpos[9] = 190
xpos[10] = 270
//To make the xpos a little simpler to set you can set this value to 1
//If you do no animation will happen, but the letters will place themself
//where they will end at the end of the animation.
testing=0
//There are 3 different animation you can use.
//Set this variable to 1,2 or 3 for the different ones,
//or set it to 4 for random
animation=3
aspeed=-10 //The timer animation speed.
/********************************************************************************
Object constructor
********************************************************************************/
function makeObj(obj,speed,xmove,ymove,works){
this.el=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;
this.css=bw.dom || bw.ie4?this.el.style:bw.ns4?this.el:0;
this.moveIt=b_moveIt;
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
/***************************************************************************
Initiating page and starting animation
****************************************************************************/
var posArray,oZdivs;
function introInit(){
pageXcenter = bw.op5||bw.ns4 ||bw.ns6?innerWidth/2:document.body.offsetWidth/2
pageYcenter = bw.op5||bw.ns4||bw.ns6?innerHeight/2:document.body.offsetHeight/2
oZdivs = new Array()
for(var i=0; i<numberOfLetters; i++){
oZdivs[i] = new makeObj('div'+i)
oZdivs[i].moveIt(-200,0)
oZdivs[i].css.visibility = "visible"
}
if (animation==4) animation = Math.round(Math.random()*2)+1
if (!testing) eval('anim'+animation+'(0)')
else testIt()
}
function testIt(){
alert(pageYcenter)
for(var i=0; i<oZdivs.length; i++){
oZdivs[i].moveIt((pageXcenter+xpos[i]),(pageYcenter+ypos))
}
}
/***************************************************************************
Intro 1
****************************************************************************/
xPath1 = new Array(-277,-271,-264,-255,-245,-234,-223,-210,-196,-181,-161,-134,-98,-52,1,53,98,131,151,156,147,124,92,59,0)
yPath1 = new Array(-240,-206,-162,-114,-64,-16,29,71,112,151,187,217,241,255,260,254,239,213,179,143,108,77,51,30,0)
function anim1(num,test){
if (num<oZdivs.length){
st = test?test:0;
animX(num,'xPath1','yPath1',aspeed,st,'anim1('+(num+1)+','+st+')')
}else endanim(0)
}
/***************************************************************************
Intro 2
****************************************************************************/
xPath2 = new Array(-285,-270,-255,-240,-225,-210,-195,-180,-165,-150,-135,-120,-105,-90,-75,-60,-45,-30,-15,0)
yPath2 = new Array(-353,-344,-335,-324,-312,-299,-285,-270,-254,-236,-218,-198,-177,-155,-132,-108,-83,-56,-29,0)
function anim2(num){
if (num<oZdivs.length){
animX(num,'xPath2','yPath2',aspeed,0,'anim2('+(num+1)+')')
}else endanim(0)
}
/***************************************************************************
Intro 3
****************************************************************************/
xPath3 = new Array(0,-2,-6,-13,-23,-36,-50,-66,-83,-100,-117,-134,-150,-164,-177,-187,-194,-198,-200,-198,-194,-187,-177,-164,-150,-134,-117,-100,-83,-66,-50,-36,-23,-13,-6,-2,0)
yPath3 = new Array(0,-17,-34,-50,-64,-77,-87,-94,-98,-100,-98,-94,-87,-77,-64,-50,-34,-17,0,17,34,50,64,77,87,94,98,100,98,94,87,77,64,50,34,17,0)
function anim3(num){
if (num<oZdivs.length){
animX(num,'xPath3','yPath3',aspeed,0,'anim3('+(num+1)+')')
}else endanim(0)
}
/***************************************************************************
Animation function
****************************************************************************/
function animX(divnum,arrayX,arrayY,speed,num,fn){
arrayXr = new Array(); arrayYr = new Array()
arrayXr = eval(arrayX); arrayYr = eval(arrayY)
arrayX = "'"+arrayX+"'"; arrayY = "'"+arrayY+"'"
if (num<arrayXr.length){
oZdivs[divnum].moveIt(arrayXr[num]+(pageXcenter+xpos[divnum]),arrayYr[num]+(pageYcenter+ypos))
num ++;
setTimeout("animX("+divnum+","+arrayX+","+arrayY+","+speed+","+num+",'"+fn+"')",speed)
}else eval(fn)
}
/***************************************************************************
This is what happens when the animation is over. If
you want something else to happen edit here!
****************************************************************************/
function endanim(num){
if (num<oZdivs.length){
oZdivs[num].css.visibility = "hidden" //Hiding divs
num ++
setTimeout("endanim("+num+")",300)
}else{
//location.href="main2.html" //Going to another page
}
}
/***************************************************************************
Starting the intro when the page is loaded.
****************************************************************************/
onload = introInit;
</script>
</head>
<body marginleft="0" marginheight="0" bgcolor="#D6D6D6">
<!-- START DELETE -->
<div style="position:absolute; left:0; top:0"> </div>
<br><br><br>
<!-- END DELETE -->
<div id="div0" class="clDivs">T</div>
<div id="div1" class="clDivs">h</div>
<div id="div2" class="clDivs">e</div>
<div id="div3" class="clDivs">A</div>
<div id="div4" class="clDivs">t</div>
<div id="div5" class="clDivs">t</div>
<div id="div6" class="clDivs">i</div>
<div id="div7" class="clDivs">
<p align="center">c</div>
<div id="div8" class="clDivs"></div>
<div id="div9" class="clDivs"></div>
<div id="div10" class="clDivs"></div>
<!--
NOTES:
You are not limited to using text here. You can have images, text-images flash movies
or whatever inside the divs. If you use images instead of text the
page will be a little bigger, but then you're sure that the it will look
the same on all systems.
Just remember to play with the values in the xpos array if you change anything.
If you add more letters also remember to add to the xpos array and to the
numberOfLetters variable.
Again; If you want to change the appearance of the letters use the .clDivs tag in the
stylesheet.
TIP: If you get problems with scrollbars in Explorer, just set scroll="no" inside the body tag!
Good luck
-Thomas-
-->
</body>
</html>
i attached it incase it didnt work because of the margins
and..
is there any way i can stop the letters from dissapearing in this script (and i know the spacing is wrong i changed the lettering :P)
<html>
<head>
<title>The Attic</title>
<meta name="Author" content="Thomas Brattli (webmaster@dhtmlcentral.com)">
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<meta name="KeyWords" content="DHTML, HTML, Dynamic HTML, Javascript, Cascading Style Sheets, Cross-browser, Cross browser, Javascripts, DOM, Scripts, Free Scripts,animationintro,animation,intro,moving,sliding,move,slide,demo,animate,text,letters,">
<meta name="Description" content="Dynamic HTML Central - The ultimate place to find DHTML scripts, demos, tutorials and help.">
<style type="text/css">
.clDivs {position:absolute; width:30px; height:30px; left:0px; font-size:80px; font-weight:bold; font-family:arial black,arial,helvetica,sans-serif; color:#999999; visibility:hidden;}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
AnimationIntro
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
/***************************************************************************
Variables to set.
Remember that if you want another font, font-size or whatever you set
that in the .clDivs class in the styletag!
****************************************************************************/
numberOfLetters=11 //How many letters do you have
ypos=-100 //The Y position of the letters, relative to the center
//The x positions of the letters, relative to center.
//This is the tricky part, when you change font-size or type and letters
//be sure to play with the values in this array, if not your letters
//will not arrange correctly. (note the testing variable)
xpos=new Array()
xpos[0] = -200
xpos[1] = -145
xpos[2] = -95
xpos[3] = -20
xpos[4] = 40
xpos[5] = 80
xpos[6] = 120
xpos[7] = 148
xpos[8] = 150
xpos[9] = 190
xpos[10] = 270
//To make the xpos a little simpler to set you can set this value to 1
//If you do no animation will happen, but the letters will place themself
//where they will end at the end of the animation.
testing=0
//There are 3 different animation you can use.
//Set this variable to 1,2 or 3 for the different ones,
//or set it to 4 for random
animation=3
aspeed=-10 //The timer animation speed.
/********************************************************************************
Object constructor
********************************************************************************/
function makeObj(obj,speed,xmove,ymove,works){
this.el=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;
this.css=bw.dom || bw.ie4?this.el.style:bw.ns4?this.el:0;
this.moveIt=b_moveIt;
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
/***************************************************************************
Initiating page and starting animation
****************************************************************************/
var posArray,oZdivs;
function introInit(){
pageXcenter = bw.op5||bw.ns4 ||bw.ns6?innerWidth/2:document.body.offsetWidth/2
pageYcenter = bw.op5||bw.ns4||bw.ns6?innerHeight/2:document.body.offsetHeight/2
oZdivs = new Array()
for(var i=0; i<numberOfLetters; i++){
oZdivs[i] = new makeObj('div'+i)
oZdivs[i].moveIt(-200,0)
oZdivs[i].css.visibility = "visible"
}
if (animation==4) animation = Math.round(Math.random()*2)+1
if (!testing) eval('anim'+animation+'(0)')
else testIt()
}
function testIt(){
alert(pageYcenter)
for(var i=0; i<oZdivs.length; i++){
oZdivs[i].moveIt((pageXcenter+xpos[i]),(pageYcenter+ypos))
}
}
/***************************************************************************
Intro 1
****************************************************************************/
xPath1 = new Array(-277,-271,-264,-255,-245,-234,-223,-210,-196,-181,-161,-134,-98,-52,1,53,98,131,151,156,147,124,92,59,0)
yPath1 = new Array(-240,-206,-162,-114,-64,-16,29,71,112,151,187,217,241,255,260,254,239,213,179,143,108,77,51,30,0)
function anim1(num,test){
if (num<oZdivs.length){
st = test?test:0;
animX(num,'xPath1','yPath1',aspeed,st,'anim1('+(num+1)+','+st+')')
}else endanim(0)
}
/***************************************************************************
Intro 2
****************************************************************************/
xPath2 = new Array(-285,-270,-255,-240,-225,-210,-195,-180,-165,-150,-135,-120,-105,-90,-75,-60,-45,-30,-15,0)
yPath2 = new Array(-353,-344,-335,-324,-312,-299,-285,-270,-254,-236,-218,-198,-177,-155,-132,-108,-83,-56,-29,0)
function anim2(num){
if (num<oZdivs.length){
animX(num,'xPath2','yPath2',aspeed,0,'anim2('+(num+1)+')')
}else endanim(0)
}
/***************************************************************************
Intro 3
****************************************************************************/
xPath3 = new Array(0,-2,-6,-13,-23,-36,-50,-66,-83,-100,-117,-134,-150,-164,-177,-187,-194,-198,-200,-198,-194,-187,-177,-164,-150,-134,-117,-100,-83,-66,-50,-36,-23,-13,-6,-2,0)
yPath3 = new Array(0,-17,-34,-50,-64,-77,-87,-94,-98,-100,-98,-94,-87,-77,-64,-50,-34,-17,0,17,34,50,64,77,87,94,98,100,98,94,87,77,64,50,34,17,0)
function anim3(num){
if (num<oZdivs.length){
animX(num,'xPath3','yPath3',aspeed,0,'anim3('+(num+1)+')')
}else endanim(0)
}
/***************************************************************************
Animation function
****************************************************************************/
function animX(divnum,arrayX,arrayY,speed,num,fn){
arrayXr = new Array(); arrayYr = new Array()
arrayXr = eval(arrayX); arrayYr = eval(arrayY)
arrayX = "'"+arrayX+"'"; arrayY = "'"+arrayY+"'"
if (num<arrayXr.length){
oZdivs[divnum].moveIt(arrayXr[num]+(pageXcenter+xpos[divnum]),arrayYr[num]+(pageYcenter+ypos))
num ++;
setTimeout("animX("+divnum+","+arrayX+","+arrayY+","+speed+","+num+",'"+fn+"')",speed)
}else eval(fn)
}
/***************************************************************************
This is what happens when the animation is over. If
you want something else to happen edit here!
****************************************************************************/
function endanim(num){
if (num<oZdivs.length){
oZdivs[num].css.visibility = "hidden" //Hiding divs
num ++
setTimeout("endanim("+num+")",300)
}else{
//location.href="main2.html" //Going to another page
}
}
/***************************************************************************
Starting the intro when the page is loaded.
****************************************************************************/
onload = introInit;
</script>
</head>
<body marginleft="0" marginheight="0" bgcolor="#D6D6D6">
<!-- START DELETE -->
<div style="position:absolute; left:0; top:0"> </div>
<br><br><br>
<!-- END DELETE -->
<div id="div0" class="clDivs">T</div>
<div id="div1" class="clDivs">h</div>
<div id="div2" class="clDivs">e</div>
<div id="div3" class="clDivs">A</div>
<div id="div4" class="clDivs">t</div>
<div id="div5" class="clDivs">t</div>
<div id="div6" class="clDivs">i</div>
<div id="div7" class="clDivs">
<p align="center">c</div>
<div id="div8" class="clDivs"></div>
<div id="div9" class="clDivs"></div>
<div id="div10" class="clDivs"></div>
<!--
NOTES:
You are not limited to using text here. You can have images, text-images flash movies
or whatever inside the divs. If you use images instead of text the
page will be a little bigger, but then you're sure that the it will look
the same on all systems.
Just remember to play with the values in the xpos array if you change anything.
If you add more letters also remember to add to the xpos array and to the
numberOfLetters variable.
Again; If you want to change the appearance of the letters use the .clDivs tag in the
stylesheet.
TIP: If you get problems with scrollbars in Explorer, just set scroll="no" inside the body tag!
Good luck
-Thomas-
-->
</body>
</html>
i attached it incase it didnt work because of the margins