Subscribe to get my new tutorials in your inbox.

360 degree car rotation – common code for mobiles and computer browsers

I had been updating my examples and tutorials off  lately and trying to create a more general approach to application development – Write a single app that runs in mobile browsers as well as computer browsers. Following the same approach, this time I am updating one of my previous tutorials – 360 Degree Car/Product rotation for iPhones. So, I worked on a 36o degree car rotation code that runs in both mobile and desktop browsers.

This tutorial is an update to my previous one, I also present a new demo. I will not go into the details, which I have talked about in my previous tutorial. Have a look at the demo, open it in either an iOS browser or a computer web-kit browser.


360 degree car rotation in mobile safari

What are the changes?

All the changes are in the javascript code. I have introduced a device detection mechanism and then automatically assign either touch events (for mobiles) or mouse events (for computer browsers). These are the same changes that I have recently talked of in my last post – Replicating the iPhone Swipe Gesture — common code for mobiles and computer browsers. That should help you out.

Other than that just try the example link in a computer web-kit browser – Chrome/Safari or an iOS device browser which is also a web-kit browser. Android devices need some changes and the same code might not work. I have talked on this in my previous post.

For the code, right click to view the source.

  1. jouni

    very nice! any way of adding easing to this (so that the movement doesn’t stop dead on it’s tracks when you stop dragging/swiping)?

    • joseph

      The car moving is caused due to the sprite image being moved by changing its position. If you see the code, there is a big sprite image with all the angles of the car. So when the mouse/finger is moved, based on the distance the sprite image is moved left or right. There is no CSS3 or any kind of animation effects that is moving the car. Hence it will be difficult to add easing effects. But a good point raised. I will have to give it a try.

  2. Catalin

    Thank you. Really helped me a lot for my project. Do you have any idea how I could add another sprite image running in the background of the car ? I have another sprite just with the car shadows and I want to add it behind the car. There are 31 angles of my car and 31 angles of the shadows in another .png file and I need to combine them together so I can see them moving both at the same time. How can I do it ?

    • joseph

      Adding two sprites would be a problem. First it would become larger in size and also two requests for two images. Moreover, you will not be able to run another sprite image in the background of the other one. You see, the sprite image is moving inside a

      element. So if you put another

      element below it and run the shadow sprite in it, you will not be able to see it. One

      will overlap the other. Why don’t you merge the car and the shadow in one sprite image and run it. That it much easier.

Write a Comment

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