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.

Link: http://jbk404.site50.net/360DegreeView/mobile/common.html

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.


12 thoughts on “360 degree car rotation – common code for mobiles and computer browsers

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

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

    1. Catalin,
      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.
      1. Another question if I may. Do you have any idea how to make the car rotate by itself while the user doesn’t interact with it and in the second the user put the mouse and drags around to start moving the way the user wants?

      2. Yes, you can use javascript timer to call the methods which are otherwise called due to user interactions….for eg. the touchstart/mousedown, touchmove/mousemove and touchend/mouseout event handler functions.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.