Creating simple animation?

JavaScript
1

I have just completed my JS studies and wish to try 3 things to test what I have learned, first I wish to create a simple animation, then I’ll attempt my own slideshow and last a specific script. First, can I try the animation on this specific forum? If not then is there another forum for this on this board or do I have to go to an animation specific site please?

2

I’m sure you’re welcome to give us a link to a website where you’ve tested your js skills on provided you’re looking for feedback. Just remember to put your script in the post so we can help where necessary.

Best of luck to you!

3

Not really, I would like to create the animation here with the help of you guys?

I don’t know how much of Javascript is involved with animation hence my question. Searching the net using the search words “javascript and animation” hasn’t produced great results. Anyway, what I would like to experiment with is 2 football players tackling each other or better let’s go with 2 boxers punching each other as with the football players this should be easy just having 2 images opposite of each other and having them meet using a script such as this:

Animation in the DOM

With 2 boxers this would be more complicated I think because only a “part” of the image [arms] has to move, can this be done with JS? If so, regarding the image, what would this entail?

4

I can’t find any method to add an animation [or even an animated gif] within the body of my outgoing yahoo mail, help?

5

Javascript is not allowed or parsed in e-mail, so animation in e-mail is going to be tricky.
You could use an animated GIF, but you’d need to embed it in your e-mail before you send it.

6

I just tried it, only thing that seems to work is to embed into the signature, not within the body itself and even in the signature, all I am seeing is the “link” to an image and not the image itself.

7

Oh, let me add that I don’t really need the script posted above as I don’t know how modern that script is so I can use any other slideshow script such as this:

JavaScript Kit- RadialWipe Transition

but what I am getting at is this, I would like one script but be able to change only the transition effects when needed, can anyone recommend the best way to do this please?

8

You can let your images of your boxer move by javascript with a script like this:


<script type="text/javascript">
function doEffect(){
var obj;
var TimerID;
var interval = 50;
var originmargin = 5; // same as margin-left in css file
var changinmargin = 0;
var changedmargin;
var speed = 5;
 
var theElem = document.getElementsByTagName('li');
 
    for (var i=0; i<theElem.length; i++){
    theElem[i].onclick = startSlide;
    }
 
  function startSlide(){
  obj = this;
  TimerID = setTimeout(function(){slideRight(obj);},interval);
  changinmargin = originmargin;
  TimerID = setTimeout(function(){slideLeft(obj);},interval);
  changedmargin = originmargin;
  }
 
 
  function slideRight(){
   changinmargin = changinmargin+speed;
    if(changinmargin<100){
    obj.style.marginLeft = changinmargin + 'px';
    TimerID = setTimeout(function(){slideRight(obj);},interval);
    }
   changedmargin = changinmargin;
  }
 
  function slideLeft(){
    if(changedmargin>originmargin){
    changedmargin = changedmargin-speed;
    obj.style.marginLeft = changedmargin + 'px';
    TimerID = setTimeout(function(){slideLeft(obj);},interval);
    }
  }
 
}
 
window.onload = doEffect;
</script>

Check the example demo here.

As you see, it is done with lists, but you can apply it to images aswel.

Anyway, you cannot send this though email, as Immerse said before.