Animate an object

I have a text area where user can type content. I have an image of a big hammer beside the text area. When a user clicks on the submit button, I want the hammer to move and hit the text area and text area disappear.
I don't want flash. How can I do this?

I am using mvc3. Not sure whether jquery is the ideal tool or html5. some code samples will be appreciated.

Thanks.
SirdotsAsked:
Who is Participating?
 
AndyAinscowConnect With a Mentor Freelance programmer / ConsultantCommented:
To do the animated gif you require some sort of editor to create one.  I've no experience with any so I'll suggest you try the one kaufmed suggests.

Before you go to far that way.  I made a suggestion.  It might be suitable but equally well it might not.  I would suggest you download some animated gif first and test that you can do everything you require on all the browsers you want to target.  Then, and only then, when everything works do you create the gif you want to use.
0
 
käµfm³d 👽Commented:
Adapting the fiddle found here:


...you can achieve something like this (click the image to start):

<html>
    <head>
    	<script src="jquery-1.10.1.min.js"></script>
    </head>
    <body>
    	<textarea>Hello World!</textarea>
    	<img src="hammer.png"></img>
    	<script>
    		var degree = 0;
    		var timer;

			function rotateCCW($img) {
				$img.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
				$img.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

				if (degree > -120) {
					timer = setTimeout(function() {
						--degree; rotateCCW($img);
					},5);
				}
				else {
					$('textarea').val('');
					rotateCW($img);
				}
			}

			function rotateCW($img) {
				$img.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
				$img.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

				if (degree < 0) {
					timer = setTimeout(function() {
						++degree; rotateCW($img);
					},5);
				}
			}

    		$(document).ready(function () {
    			$('img').click(function () {
    				rotateCCW($(this));
    			});
    		});
    	</script>
    </body>
</html>

Open in new window


This won't work in every browser, though.
0
 
AndyAinscowFreelance programmer / ConsultantCommented:
Would an animated GIF be suitable ?  (The image contains all the images and shows them in sequence)
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
käµfm³d 👽Commented:
@AndyAinscow

How would you prevent the image from being animated to start with? (What I gather the intent is here.)
0
 
AndyAinscowFreelance programmer / ConsultantCommented:
That is why I asked if one would be suitable.  (swap a static image with an animated image on button press?)
0
 
käµfm³d 👽Commented:
Touché  = )
0
 
SirdotsAuthor Commented:
Thanks for your comments everyone. Kaufmed - the code you provided does not run. What do I do?
0
 
käµfm³d 👽Commented:
What browser are you using? I was working in Opera. Chrome should work as well. I cannot speak for IE. Also, you'd need an image file. I was using the attached.

Image
0
 
SirdotsAuthor Commented:
Thanks. I changed the head script to this

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

I used a hammer image and tried chrome,IE and firefox but still no luck. I will continue to troubleshoot.
0
 
käµfm³d 👽Commented:
Honestly, the animation itself is kind of slow. You might consider using Andy's approach for a better user experience and better browser compatibility.
0
 
SirdotsAuthor Commented:
Thanks AndyAinscow. How do I do the animated GIF?
0
 
käµfm³d 👽Connect With a Mentor Commented:
You can download GIMP and then review this video:  http://www.youtube.com/watch?v=f-9_HwRcd1A . If you already have Photoshop installed, I believe you can create animaged GIFs with it, but I don't have any experience with that tool, so I cannot advise how you would go about it. Whichever route you choose, be sure to save a copy of your first frame as a single image. That would become the "static" image that Andy referred to. Then the animated GIF would be swapped in via JQuery when you want the animation to occur.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.