The case of the spinning image

May 31, 2015

For a recent website redesign project, the design called for some spinning images. I had never done a spinning image and so I hit Google. And as expected I found many jQuery plugins that did just that. But, there is always a but, the ones I found were over-engineered for my purpose and did not all do what I needed them to do. The image needed to spin, be responsive, minimize http requests to support fast page load and I was curious, so I build it myself.

To make a spinning image we take advantage of the Phi phenomenon, the optical illusion of perceiving continuous motion between separate objects viewed rapidly in succession. To achieve the illusion of smooth motion we need a minimum of 36 images or frames.

We can create this illusion by using many images, positioned on top of each other, and then moving each image to the top in sequential succession at a fast rate.

image of a stack of single images

This approach works well, but it has one drawback, each individual image requires a separate http request for loading. 36 additional http requests killed this approach right away.

An alternative approach was using one large image that contained all frames - all 36 images merged into one. I used this large image as the background of a container. The background image position was changed by one frame width every 36th of a second, and that did the trick.

image of an image sprite

The disadvantage of using one large image is that we have to load a …well… very large image but it turns out that even a large image download beats the latency of 35 additional http requests. That rationale is why we use image sprites rather than individual images. There is a good write-up about that at the Yahoo developer pages.

If you prepare the image in Photoshop, be aware that Photoshop will limit the image to a width of 8192 pixels if you save the image with Save for Web & Devices.... Save the image as a regular jpg file and optimize it with tools like Image Optimizer. There are many more on the web.

So a large background image sprite it was. To make this spinning image responsive, I created an empty container div with its width set to be a percentage of its container. To get the right height, we set the container height to zero and apply a bottom padding that corresponds to a single frame aspect ratio in percent. The background image is applied with background-size: cover , which makes it fit the height of the container.

The css looks like this:

Now we can modify the background position periodically and the image starts moving. For this approach to be responsive we’ll need to change the background position a percentage of the whole background image.

And here is the final implementation. On page load I use a single image so we don’t see a flash of empty space before the large image sprite is completely downloaded. I swap the background image when the onload event occurs.

Double clicking will stop/start the spin and click and drag will move the image manually.

To describe the code in detail for this project proved to long, instead I have attached my dev sandbox as an archive. You can download and see for yourself how this all fits together.

Download the archive