The case of the spinning image

Mar 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 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.

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 a background of a container. The background image position was changed by one frame width every 0.1 second, and that did the trick.

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.

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 basic css looks like this:

.imageSpinContainer {
  width: 30%;
  height: 0;
  padding-bottom: 33.63%;  /*reflects the single image/frame aspect ratio*/
  background: transparent url('../images/cork-screw.jpg') no-repeat 0;
  background-size: cover;
 }

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 jQuery 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

 

If you like to see the new website in action, hop over to instartlogic.com. Design credits go to the incredible team at 1185 Design in Palo Alto. These folks never cease to amaze me.

 

Comments

Hello Sir, Awesome article, I have a few queries though, 1. Full Screen option not available 2. how to make sprite sheet (Matrix of 10 x 10 images) work.

If you look into the main.js file you'll find the method _goToNewFrame on line 161. In that method you'll have to check where the current frame is in the matrix, e.g. if i=13, then the frame is located in the second row and the third image. On line 166 where I update the background position of the image you'll have to update the x and y values accordingly.

Add new comment