Hard To Explain?

[PicnicTutorials]

Good morning, I need to rotate an image of a plane. But rotate it like the left wing is dipping down. Then I need to rotate the wing back up the other way. Making a sprite using jquery spritley for my new site design. thanks!

[falkencreative]

...sorry, I'm not sure if I understand. Do you have an example or a rough sketch of what you need?

[PicnicTutorials]

Hey Ben. Sorry I don't. I want to take this plane image and dip the wing down as if it were turning. Then up as well. I'm making a sprite with frames to use with jquery spritely. The end result will appear that the plan is rotating as it maneuvers around the screen. Of wait I do have an example here it is

I just don't want to use that plane.

[falkencreative]

I really don't think there is going to be a magic tool for that -- each frame of that animation would very likely be hand drawn. To some extent you can use the free transform tool to adjust the proportions of large elements (like a wing), but this is more of an illustration question than something done by a photoshop tool.

[grabenair]

This might git you started. Just some stuff from my jQuery library folder. I think you should be abel to take this and change it to tip the div with your plane in it.

 

 

Position Animation with Relative Coordinates

 

One unique trait of position-based jQuery animation is that we can animate an element's x and y coordinates relative to its current location, without having to do calculations on our own. Instead, jQuery allows us to simply use += or -= operators as demonstrated below:

   $(document).ready(function() {
       $("#target").animate({ top: "+=100px" }, 1000);
   });

 

 

Isn't this great? The target element will be moved from its original position (let's say 200px) to a new position (300px) on the vertical Y-axis (which top: property is responsible for.) In this scenario this smooth animation will take place over a period of 1 second.

 

Note: when doing relative position animation, we must use double (or single) quotes on the value, otherwise the script will generate an error because these are the rules of the animate method (as mandated by JavaScript identifier names and Object Literal syntax principles). And of course there are some issues with the "px" which is not always necessary. But if you must use "px", the entire value must be wrapped in quotes. Consider the following examples.

 

$(document).ready(function() {
       $("#target").animate({ top: 100px }, 1000);        // Error, no quotes around px
       $("#target").animate({ top: +=100px }, 1000);    // Error, no quotes
       $("#target").animate({ top: "+=100" }, 1000);     // Ok
       $("#target").animate({ top: "+=100px" }, 1000); // Ok
       $("#target").animate({ top: "100px" }, 1000);     // Ok for double quotes
       $("#target").animate({ top: '100px' }, 1000);      // Ok for single quotes
       $("#target").animate({ top: 100 }, 1000);           // Ok, without quotes if no px or += present
  });

 

 

Animating Position

 

You can animate pretty much any CSS property which makes sense to animate. We are not limited to font size or colors. For example, a popular animation technique is to dynamically move the object around on the screen. This can be achieved by animating it's left: and top: properties. But we also need to ensure that the target's element's position is set to absolute:

 

$(document).ready(function() {
   $("#target").css({ position: "absolute" });      // Force position: absolute
   $("#target").animate({ top: "100px", left: "125px" }, 5000);    // Slide to 100/125 in 5 seconds
});

Edited January 15, 2013 by grabenair