GitHub repository, progress so far.

I’ve got it to “move forward” when you click, and today I animated it.

Originally I was moving forward by just moving the images into the level in front of it.  The levels are stacked divs with different z-indexes, so when I just moved the images into their new levels on click, it was a bit jarring.

The jQuery class I was in had talked about animations, so I decided to try it.  Unfortunately, this meant I had to change how I was doing things.

I assume that all the images I use will be the same size, to make calculating positions easier.  For the two back levels, I had been using transform scale in the stylesheet to make the images smaller.  However, jQuery’s animate function can only animate properties with number values.  This meant that I couldn’t use, say, transform: scale(0.8).  However, I could animate the change in width and height – so I decided to do that instead.

Now, to animate it, I move all the existing images forward a div; the front-most level is moved into a temporary div on top of all the other ones.  When this is done, there is no visual difference.  Then, I fade out and remove the images in the front-most level, animate the change in width, height, and position of the second and third levels, and fade in a new back level.

If the mouse was moved during the animations, there was a bit of weird jerking movement, so I just made it so that the mousemove handler has no effect until the animations are done.  Good thing the jQuery animation functions can take callback functions!

I also changed the temporary images to different temporary images of just numbers.  It’s a bit easier to see the movement, but still kind of weird looking since they don’t have borders.  All that’s left is to draw the actual images though, and then it should be done!  Unless I find some weird bug or think of something else to add to it…