...

View Full Version : help me with text animations



zqxwce
02-16-2007, 04:28 PM
I'm a javascript programming beginner; I need a solution in regarding text animations. I would like to make a text say it “hello world” to start at point which is at top and little far from the right top of the screen and should scroll to the right bottom of the screen and get disappear. The whole action should be repeated again and again. Any assistance would be most appreciated.

vwphillips
02-16-2007, 05:45 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function zxcWWHS(){
if (window.innerHeight){ return [window.innerWidth-20,window.innerHeight-20,window.pageYOffset]; }
else if (document.documentElement.clientHeight){
return [document.documentElement.clientWidth,document.documentElement.clientHeight,document.documentElement. scrollTop];
}
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollTop];
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

var zxcAnimateObj,zxcCnt,zxcPos,zxcTO;

function zxcStartAnimation(){
// the function ES simplifies creating an element, adding inline style to the element, appending a text node to the element and appending the element to another element
zxcAnimateObj=zxcES('DIV',{position:'absolute',width:'200px'},document.getElementsByTagName('BODY')[0],'hello world');
zxcRunAnimation();
}

function zxcRunAnimation(zxcrun){
if (!zxcrun){ zxcCnt=0; } // ro reset the count at the end of travel (when zxcrun is true)
var zxcpos=zxcWWHS(); // get the wintow width, height and scroll top from function zxcWWHS
clearTimeout(zxcTO); // make sure the timeout is cancelled to avoid duplicate execution of this function
if (zxcCnt<zxcpos[0]){ // if the full travel has not reached (zxcpos[0] is the window width) move the div
zxcES(zxcAnimateObj,{left:(zxcCnt)+'px',top:(zxcpos[2]+(zxcCnt++)*zxcpos[1]/zxcpos[0])+'px'});
zxcTO=setTimeout('zxcRunAnimation(true)',10); // the 10 is the repatition time in milliseconds
}
else { // if the full travel has been reached call this function with the pass parameter(zxcrun) true to reset the count
zxcRunAnimation();
}
}




//-->
</script></head>

<body onload="zxcStartAnimation();">
<div style="height:1000px;" ></div>
</body>

</html>

Arty Effem
02-16-2007, 05:51 PM
This is where he asks for an explanation of how it all works - not out of curiosity, but so that he can explain it to his teacher.

zqxwce
02-16-2007, 08:03 PM
thanx alot...u got most of the part correct..
could u more look into this in detail...the url at the bottom has how exactly it is supposed to look like.

http://www.UploadYourImages.com/view/542486question.gif

thanx again...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum