Today I decided to recreate the iOS 7 parallax effect which is shown here.
This was fairly easy to do and did not require much time to implement. I had to use a second blurred background image for the icon panel since using the CSS3 blur brought the browser to a crawl on an iPhone. The main issue left in the demo is gimbal lock when you approach 90 degrees on the x-axis. This can probably be remedied by using a quaternion storing the gyroscope’s rotation to find the translation for the background image. I may come back to this project and fix this by using three.js or something similar. For this demo, I simply wanted to see what the new UI would feel like.
If you have a device with a gyroscope and a browser that supports it,
you can view the demo here.