rotate360 (Image rotation in javascript)

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.

Space carousel

View Demo

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.

37 thoughts on “rotate360 (Image rotation in javascript)”

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

  2. 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?

  3. @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…

  4. Thanks for the fast reply Ricky.
    Do you have those files for download anywhere like Oliveta has done?

  5. 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 😉

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

  7. 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;
    }

  8. 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 :)

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

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

  11. 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? :)

  12. 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?

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

  14. Hi,

    Excellent work!
    But I have an issue. The firefox on win XP, it doesn’t work properly. When I move back, passing the negative bg position to positive, it shows me nothing. I think the browser can’t handle the huge image I have (27000px height).
    Your example works pretty good.

    Do you know what can cause this? It’s strange, ’cause it works fine in IE>8, chrome and FF in win7.

    Thanks in advance,
    André

  15. What a shame. The last post here is only 16 months old and already this article contains one broken link after another. If you are going to post a public blog, you should keep it maintained.

  16. Hi,

    I would like to put your code on a bottle to get a 360° rotation effect. I don’t know how to do so..could you help me please? Your effect is so nice :)

  17. pls forward the css and javascript to my email. could you kindy explain where to put each e.g body or head thanks great stuff!!!

  18. Hello I would be interested in your 360 ° is also possible to have to pay for? hello thanks. very beautiful

Leave a Reply

Your email address will not be published. Required fields are marked *