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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    66
    Thanks
    0
    Thanked 2 Times in 2 Posts

    A little Javascript Animation

    Well, my first post was a lie. I didn't need any help. But as long as I had already started an animation thread, let me share this code with you.

    First I generate a bunch of paragraphs (var newPara). I give them these attributes:

    Code:
    newPara.onclick=clickTheLinkPlease;
    newPara.onmouseover = animatePara;
    I then created the functions:

    Code:
    function animatePara()
    {
    	var paraElement = this; var paraId = paraElement['id']; 
    	paraElement.setAttribute('className','animate'); 
    	animateThis(paraId); 
    }
    
    function animateParaBack()
    {
    	var paraElement = this; var paraId = paraElement['id']; 
    	paraElement.setAttribute('className','unanimate'); 
    }
    
    function animateThis(paragraphId)
    {
    	var allParas = document.getElementsByTagName('p'); 
    	for(var i=0; i < allParas.length; i++)
    	{
    		var paraElement = allParas[i]; var paraId = paraElement['id']; var paraClass = paraElement['className']; 
    		if(paraId == paragraphId)
    		{ 
    			var currentPadPx = paraElement.style.paddingTop; 
    			var currentPadNum = currentPadPx.substring(0,(currentPadPx.length-2)); 
    			
    		
    			
    			if(paraClass=="animate" && parseInt(currentPadNum) < 15)
    			{ 
    				var newPadNum = parseInt(currentPadNum)+1; 
    				var newPadPx = newPadNum+"px"; 
    				
    				paraElement.style.paddingTop = newPadPx; paraElement.style.paddingBottom = newPadPx; 				
    			}
    			
    			if(paraClass=="unanimate" && parseInt(currentPadNum) > 5)
    			{
    				var newPadNum = parseInt(currentPadNum)-1; 
    				var newPadPx = newPadNum+"px"; 
    				
    				paraElement.style.paddingTop = newPadPx; paraElement.style.paddingBottom = newPadPx; 
    			}
    			
    			setTimeout('animateThis('+paraId+')',5); 
    		}
    	}
    }
    It works. It's not exciting, but it works. What's impressive about this to me is that it's possible . . . I am excited.
    Last edited by ruggeddesign; 10-24-2006 at 07:14 PM.

  • #2
    Regular Coder
    Join Date
    May 2005
    Posts
    142
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool

    Want to see some animation with a purpose?

    Check out my SnackMan game written in Javascript.

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    66
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Nice.


  •  

    Posting Permissions

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