Any eCommerce owner should know the value of accurately including relevant product details on their site. But for site owners who are interested in going the extra mile, a level of interactivity on their site’s homepage can raise the bar and put them a cut above their competitors.

We were tasked with building such an experience for one of our clients; OX Tools. Interaction needed to be an important part of the process. What better way to advertise a hand held product than to virtually touch it; and outside of Flash, javascript was the best tool to achieve our aims of product interaction.

A 360 degree product spinner was our concept, and not only did we want users to be able to view the product from all angles but we also wanted inertia, iPad compatibility, and an interactive shelf which would move tools to different points.

To make our concept a reality, we decided upon jQuery UI’s vast array of easing methods; all of which can be demonstrated on this useful website:

So the first part was complete. We had employed a javascript library to move our tools around to their various shelf positions and zoom each of them to center stage for a close-up view. To make each of the products spin, our client began by photographing thirty five frames each, all set against a white background.

As with all projects, our first attempt didn’t go smoothly. All of the images sent over by our client had shadows – which would have been fine if we intended to keep the rear of the spinner white… however we needed each image to have sharp definition around the product for it go atop an on-brand background. OX Tools had to painstakingly remove all of the shadows and re-deliver them to us.

Once the images were all correct and shadowless we began integrating each image to create the illusion that a sequence of PNG images were actually in motion. To achieve this we turned to a javascript creation called Magic 360 from Magic Toolbox which allowed customers on desktop and mobile to view each product from every angle.

View OX Tools’ 360 degree product spinner here: