SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating simple animation?

    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. #2
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mikehende View Post
    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?
    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. #3
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    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. #6
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can let your images of your boxer move by javascript with a script like this:

    Code:
    <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.


Bookmarks

Posting Permissions

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