This is an example of image rotation and control using CSS sprites and JavaScript. The example i went for is based on a product demo by apple for the Ipod touch. There example uses Quicktime but i thought is was possible in JavaScript so i gave it a go.
Step 1
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.
Hi there,
Firstly, its amazing what you have done via javascript. I been trying to get this effect done and have failed miserably. Is there something you can provide me to get it done? Do you have the code and etc? that would be amazing.
Thanks a lot
Navroop Sehmi
Man feel free to use the code. You can view it using firefox and firebug.
I use the mootools framework for help myself.
Wow.. Great man! And very nice blog
Wow, truely amazing.
I think i am going to use this for my next personal portfolio.
Did you know this does not work in IE btw.
In IE8 i get a black box. Just for your info.
Will you fix this? Loads of people use IE.
Question:
Let’s say i want to do this with an image of myself.
What is the best aproach? Build a rotating platorm and use a HD camera?
Or is there an easier way to rotate yourself with this script?
@Luuk Hey man,
I personally have no access to IE(6-9) at the moment, I’ll borrow my mates laptop and try fixing it ASAP.
Thanks for the heads-up!
And for your question… I did attempt something similar using a home made lightBox and a cheap video camera. The problem was my equipment. Unless you can afford a good filter or have time to edit every frame it’s quite difficult.
The benefits of getting a setup correct would be worth a fair price mind. Imagine this used for an electronic retailer website…
This is stunning, it works smoother than the actual apple 360 degree view!
Very nice solution Ricky!
If you do not mind, I have given an OOP twist to your code and here we come: http://rapidshare.com/files/413432739/Rotate360.zip.
There is as well included small application for joining image sequences (both Windows & Mac version)
Hope you guys will find this useful. Thank you again for this simple and fresh idea.
…Ooops…sorry…better download link: http://rapidshare.com/files/413437058/Rotate360.zip
Hi Oliveta,
I rewrote the whole thing for http://www.digitalmediaprojects.co.uk/products/uhdms
This one works with iPad/iPhone and loads better.
Hey Oliveta,
The clocks look great
hehe.
Nice class too, i’m too lazy to write them so great work.
Hey – pretty cool.
I have an issue with the ipad though.
http://www.a9ksystems.co.uk/360/
Got this working nicely for desktop browsers but having trouble with the iPad swipe. Would appreciate any help.
Cheers
Will try this one on the iPad:
http://www.digitalmediaprojects.co.uk/products/uhdms
I wrote this at work!
Thanks for the fast reply Ricky.
Do you have those files for download anywhere like Oliveta has done?
Sorry Will I wrote the iPad stuff at work so I can’t share it! If you look at the code in firebug though you can see everything
Many thanks,
works like a charm, keep up the good work.
ps i love your logo, and how it turns blue when hovering above it.
Ricky,
i found the solution of the problem that you see a black box in IE instead of the image.
#control{
cursor: move;
position: absolute;
z-index: 1001;
background: #000; //remove this live
opacity: 0;
width: 704px;
height: 376px;
color: #fff;
}
Hi Tim the logo was my first play with the element. The code’s available under Halloween Logo experiment on this site.
Thanks for the IE tip though
hi,
It’s really nice
looks like a great project and good work!!
I have downloaded the zip file posted here, but am not sure how exactly to get the app “imagejoiner” to work
it opens, i chose the folder of my images, but when i hit the button to create, it simply does nothing (no error message, nothing)
Also i am confuded by the add to file and select file button – what file do i select for this – i tried already a .txt file and also a blank .jpeg file but still nothing happenes…
Please let me know by email as soon as possible, many thanks
Sam
Hi Sam,
I’ve never used imagejoiner myself, it was posted by someone else. If you take alook at http://www.digitalmediaprojects.co.uk/products/uhdms I just increment the image file name. [filename][no].png
Seriously, how is this done?!
I’ve been sitting with the clock.zip trying to make one of them rotate as I want with a pair of shoes, but fail again and again.
How?!
xoxo
Hi,
I would like to use your codes for 360 rotation of few images on my website. I am very new to these things. How can I load my own pictures to your codes? Do you have any instructions for dummies?
I agree with Lisa, how is this done?
I keep playing with it too and can’t get it to recognize my sequence of images.
how?
alright, the trick is to merge the sequence of .jpg’s into one giant vertical .jpg with them stacked on top of each other. other websites never said that either. i thought it was a panoramic/hdri thing or something like that.
thanks uploading the zip file with the “works” in it. i tried downloading it a few times before and it always came in corrupted, which is why i couldn’t figure this out.
thnx