View Full Version : help me with text animations

Feb 16th, 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.

Feb 16th, 2007, 05:45 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


<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');

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


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


Arty Effem
Feb 16th, 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.

Feb 16th, 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.


thanx again...