Web Analytics Made Easy -
StatCounter animation using dhtml - CodingForum


No announcement yet.

animation using dhtml

  • Filter
  • Time
  • Show
Clear All
new posts

  • animation using dhtml

    hello, I have a quick question I am trying to animate using dhtml but It is getting to complicated...

    is there any scripts or help you could give, for simple animation

    pictures that rotate (using 10 frames) + one where I can control the speed.. and to animate divisions to glide up and down

    simple is my keyword, I am only ten years old


  • #2
    Okay, whizzkid

    NOTE: all the stuff below should work on IE

    The main function you need in an animation is setTimeout("function_name",speed)
    Just to get you familiar with setTimeout(), just in case you don't already know it...

    Say you've got this function:

    function writeit(){ //this function will just write text into a textbox
    document.forms.theform.thetextbox.value="I am the text.";

    <form name="theform">
    <input type="text" name="thetextbox">
    <input type="button" value="write it" onClick='setTimeout("writeit()",5000)'>

    press the button, and the writeit function will execute after 5 seconds. the speed passed to the setTimeout function is in milliseconds.

    So, you want to do an animation. I'll just give u one for gliding down. You can change it to move upwards by changing y and yMax.

    For an animation, the setTimeout() function has to be placed withIN the main function.
    This way, setTimeout() works rather like a loop, executing the function every whatever-milliseconds-you've-decided.

    var y=0;// this HAS to be OUTSIDE the function

    function animateIt(){
    var theDivision=document.getElementById('animatedDiv'); // get required division
    var yMax=250;// the division's maximum y coordinate -- it'll travel down till here
    if(y<=yMax){ // as long as y is less than yMax, y should keep increasing
    theDivision.style.top=y;// assign y to theDivision's top y-coordinate
    y=y+10; // the y-coordinate increments each time by 10 pixels
    // if you increase the increment, it makes action a little less smooth and faster
    setTimeout("animateIt()",1); // this will force the function to repeat itself every
    //1 millisecond, until the if condition turns false


    <input type="button" value="Move!" onClick="animateIt()">
    <div id="animatedDiv" style="position:absolute; top:10; left:100;background-color: orange; width:30%; height:30%"></div>

    Why does y=0; need to be outside the function? because setTimeout will work as a loop, executing the whole animateIt() function every 1 millisecond. If we put y=0 within the function, y will always be re-assigned 0 every time the function runs again, it'll never get past getting increased to 10.

    To make the division go up instead of down, change y and yMax, to say, 250 and 0, respectively. You'll also have to change y=y+10 to y=y-10.

    After the animation, you can probably see that the value of y is now that of yMax. so the division won't move again if you press the button, because the if condition will always be false ... y will not be y<=yMax. To see it move again, you'll have to reload the page so that the value of y is 0 once more.
    To fix this problem you can add "y=0" to the onClick part of the button:

    That was simple enough, I hope ... I can't remember my own capacity of understanding when I was your age ... that was a while ago.

    Here's a function so you can change the speed by passing it as an argument into the function.


    var y=0;// no animation for you if you accidentally stuff this within the function,
    // like I did, a million times

    function animateIt(speed){// you can change the speed by passing whatever number as an argument
    var theDivision=document.getElementById('animatedDiv');
    var yMax=250;
    var temp='setTimeout("animateIt('+speed+')",'+speed+');';//temp holds the
    // setTimeout statement
    eval(temp); // execute the statement stored in the temp variable


    <input type="button" value="Move!" onClick="y=0;animateIt(1)">
    <!-- we're passing on the speed of the animation to a movement every one millisecond .. you can change it-->
    <div id="animatedDiv" style="position:absolute; top:10; left:100;background-color: orange; width:30%; height:30%"></div>

    Hope it helps . Now you can enjoy seeing your friends' eyes go goo-goo...
    Last edited by ASAAKI; Jul 11, 2002, 01:54 PM.
    'If you don't stand for something, you'll fall for anything.'