background image

iOS 7 Parallax Effect

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.

Fork the project on github

Leave a Reply

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


You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>