RickyH - rotate360 (Image rotation in javascript)

This is an example of image rotation and control using CSS sprites and JavaScript. The example i went for is based on a product demo by apple for the Ipod touch. There example uses Quicktime but i thought is was possible in JavaScript so i gave it a go.

View Demo

Step 1

First i download the QuickTime file opened it and exported it as JPEG images at 1 image per second. I think this produced about 72 images at 40k each.

Step 2 – FAIL!

In my first attempt i tried to show all 72 images positioned on-top of one another. When i needed a specific image I would just change the z-index. The method stank and the results were terribly slow.

Step 3 – RSI!

My next idea was to use it as a CSS sprite. I had no idea this would work but set out adding all 72 images into one very large file. I even thought of writing an app just to do this for me as it may have taken less time. Once done the image dimensions were 880px by 33840px – The problem with this is I couldn’t save it as JPEG/png/gif only TIFF which isnt natively supported in browsers. So… I did some research and found out the height must be less than 30000px to be a JPEG. Once resized and saved i was ready to code.

Step 4 – code!

The coding was simple really: i just change the background position on mouse-move and the animation is done. Take alook at the code on the demo, it’s really easy. I added a few options just in case your using a slow browser or your CPU is slow.

Step 5 – Future work

I really like the effect and might see if speed improvements can be made in canvas. I might also invest in a tri-pod and lightbox and take some stop-motion pictures of my own. I have done a few websites where this would have been great. Any further suggestions please leave them below.