Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post help me with text animations

    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.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!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>
    Last edited by vwphillips; 02-16-2007 at 06:01 PM. Reason: added note about timing
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •