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.