Who wants to be friends?
My Twitter   My Facebook   about me

jQuery Tutorial 7 - jQuery Animation

Written by Greg Sidelnikov

TABLE OF CONTENTS - In This Edition:

  • Sonic Hedgehog in "Running forever" animation
  • How does the floor work?
  • Other practical examples of jQuery animation
 
jQuery & HTML5 Animation











The 3D floor only works in Chrome and is . . .
-webkit-transform: perspective(0) rotate3d(1, 0, 0, 45deg); and
-webkit-transform-style: preserve-3d; and
background-position-x -= 10px; (animated with setInterval)

It's quite amazing how little code is used to achieve this animation. Here, jQuery was mostly used to slide the background position of DIV elements. This sliding effect is used twice. Once for the Sonic Hedgehog animation to rotate animation frames and the second time to rotate the "texture" of the floor.

Because the floor is tilted on the X axis using CSS 3D transforms it creates a perspective-correct texture mapping that just looks great. I think it's really amazing that it's just a DIV!

The blue and  white  stripe is yet another DIV animated in the same exact way, except it is not 3D because it doesn't really need to be. This DIV gives the floor animation an edge (no pun intended. . .)

As you can see, with just a little creativity on our part, we can align various DIV elements to fit together just right. . . and achieve some dramatic visual effects.

Who would have thought this was even possible without using HTML canvas? Well, it is!

Don't get me wrong, I am not sayng you shouldn't use canvas. In fact I am planning for my future tutorials to be canvas-based. The purpose of this tutorial is to show you what's possible with current browser limitations. It's fun pushing the boundaries and getting creative with the limitations of what we have. This principle can be applied to many areas of your work, not just HTML programming.

Let's take a look at Sonic's sprite. . . it's just one continuous image:

In order to animate this sprite, all we need to do is to confine it within a container DIV element that has clip style set to 100 by 100 pixels.

Then, we nest the container DIV with the sprite.

The sprite describing the running animation is simply a 800px by 100px stripe with all animation frames. I saved it as an image in PNG format. It is a long stripe but it will be clipped out by the clip style which was applied to the container DIV.

This container frame determines the physical location of your sprite. I named its id #Sonic. Because #Sonic clips a 100px by 100px square, we can only see one frame at a time. To go to the next frame, all we have to do now is change the background position of this stripe by adding 100px to its current value, whatever it may be at the time. The rest of the hidden frames will be clipped out.

Once we reach the last frame, we reset the sprite position back to 0px (the first frame) and the process repeats all over again.

The following diagram visually explains this setup:

So now that it's clipped, we simply change the background position of the sprite nested inside the container.

How Does The Floor Work

The floor is just a DIV. After applying some CSS transforms to it, as shown in the diagram below, we can turn it into a 3-dimensional plane.

The floor animation is a bit of a cheat. But that's okay, it is traditional to cheat in order to create an innovative animation or game. In fact, that's how Doom and Quake I & II were created as well as other classics such as Jazz Jackrabbit 1 and 2, some of the first "console" style side-scroller games ever created for the PC.

Animating css floor with animate() and setInterval...

What you then do, is you animate the backtround-position-x aka backgroundPositionX using jQuery animate, and put it in a loop using the native setInterval function of Javascript.

You can check out the source code of this page to see exactly how this is done.

Right now, the sonic sprite is static, it's not moving. To physically animate the X position of the character, all you would have to do is to move the container DIV itself. The animation will continue playing inside that DIV.

How to make Sonic run in the opposite direction?

In order to change direction of Sonic character we would need a larger grid that also contained frames of Sonic running in the other direction - not shown in this tutorual.

This new stripe would be twice its current height as it would contain an entire new row of animations. These extra frames would be located right below the ones we already have, 100 pixels down, and include exactly the same frames but flipped on the vertical axis.

Then, in order to change the direction of your animated character, toggle the background image's background-position-y between 0px and 100px whenever the left or right arrow keys would be pressed.

Other practical examples of jQuery animation

Well, that was great, but when people think of jQuery animation, they really think of animated DIVs. I just thought they were covered by many other tutorials and were quite boring. . . so why make more of the same content?

Still, there are many varieties of jQuery animation. One of the most popular methods is the animate function. Let's take a look at what we can achieve using animate().

Sonic Hedgehog

Animate text size

We can animate font size using the animate function. This is probably not the most exciting jQuery animation example, but it does demonstrate that even basic styles can be animated using jQuery.

$('#text').stop().animate({ fontSize:'30px' },500);
$('#text').stop().animate({ fontSize:'12px' },500);

Move on X and Y axis

Using jQuery animate function we can accomplish this effect on click event...

We need stop to stop the current animation. This creates more fluid controls.

$('#moveit').stop().animate({ top:'-=64px' },500);
$('#moveit').stop().animate({ left:'-=64px' },500);

Notice the -= sign, which will subtract 64px from current position.

Rotate DIV

Code example to rotate clockwise in webkit browsers:

This will not work in non-webkit browsers, but same CSS principles will work.

crate_rot -= 20;

$('#crate').css('-webkit-transform','rotate(' + crate_rot + 'deg)')

Support my jQuery Tutorial work

Ow... yellow hurts. It also hurts to write great tutorials such as these for free!

It makes a difference when you    Click Here to submit a PayPal donation    to keep my creative juices flowing.

Average donation is about $13, but you can submit a monetary donation in the amount of your choice.

Like this episode? Tell your friends about it please share this newsletter with friends by using links below.

To paste in Facebook:

To paste into a website as a hyperlink:

Thanks for sharing! I really appreciate this - it really motivates me to write even more free jQuery tutorials.

See you in the next episode!

Next Episodes:

  • Episode 1 - jQuery Plugin Development
  • Episode 2 - jQuery CSS Selectors
  • Episode 3 - Understanding jQuery Events
  • Episode 4 - How to speed up jQuery
  • Episode 5 - jQuery and making HTTP requests with Ajax
  • Episode 6 - Selecting HTML Elements (continued)
  • Episode 7 - jQuery Animation
  • Episode 8 - Developing a Touchscreen User Interface with Sound Effects   < Next Up
  • Episode 9 - Capturing Keyboard Events
  • Episode 10 - Making a jQuery Game: Tetris
  • Episode 11 - Create an Auto-suggest Input Field (PHP & MySQL)
  • Episode 12 - Long-distance Travel: Traversing Complex HTML

Recommended Material

Discuss this tutorial with your Facebook Account:

Please post comments, error-corrections or suggestions: