Jump to content
Stef's Coding Community
PicnicTutorials

Hard To Explain?

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by grabenair

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...