I thought Apple’s new 360 degree product viewer was flippin’ awesome. So I created a feature light version in mootools last night. I hope to add more (like throwing) and clean up the api a bit, but still, this is sweet.
As you can see in the source I created two classes. The first MouseWatcher is a sort of drag class that listens to the mouse position (clientX and clienY) after a mousedown event. I hope to extend this class to provide the “throwing” logic. Then in ThreeSixty I just extend MouseWatcher with a drag method, so on every mousemove the image src gets changed out.
Eventually this will make it into the forge, as soon as I get throwing to work, package it with some grabbing cursors and preload the images a bit more gracefully, of course.
Social comments and analytics for this post…
This post was mentioned on Twitter by ryanflorence: http://bit.ly/9MToQi – #MooTools ThreeSixty viewer featuring the iPad….
Great Stuff Ryan! Makes me want an iPad even more (not that it is going to happen
)
On reading this post I was reminded of something similar I came across a few weeks ago: http://demo.rickyh.co.uk/rotate360/ A different approach to a similar concept but both done with Mootools
Pretty slick business there. Thanks for sharing.
I did something similar last year but i think yours seems smoother. When i built mine I found that having multiple images instead of one was slower. But in your example it seams fine. http://demo.rickyh.co.uk/rotate360/ for my example dude.
This is pretty dope. How did you find that apple stores the images in this way? After looking at the image list I initially wondered why they didnt use a sprite, but I realized that there is no looping with a sprite.
Cant wait to buy an iPad
— 3g or not? I’m perplexed…
After reading over the code a bit more I just want to say that you did a great job with this man.
I cant wait until you release it. Now the issue is taking a good looking 360 panoramic.
Sure there is!
http://mootools.net/forge/p/spriteanimation
Its me again..
I tried to make it auto rotate, like on apple’s site — there has to be a better way right
http://jsfiddle.net/EcLXU/
I just tried it. The image is “flickering” when moving. I also tried RickyH version and it doesn’t have this drawback. I don’t know if it only happens to me, but a fix for this would definitely bring the animation to a next level.