With the dawn of iOS 7 I’ve been fascinated by the new parallax effect. It creates a much needed sense of depth to an otherwise flat ecosystem of apps. But what about web apps? What’s stopping web-developers from utilizing the accelerometer to create similar effects for the web? Answer: Nothing! This blog posts explains how to add some parallaxin’ swagger to your mobile web sites.
What’s in a parallax?
The basic concept behind the parallax is simple – move separate layers of content at varying speeds and Viola, you have a parallax effect!
To illustrate the idea you can see the effect in action here. Notice how the background and highlight layers move at slightly different rates corresponding to the mouse position.
The parallax effect has been around for years, dating back to the early flash days. Unfortunately, not every parallax effect is created equal. At it’s best the effect can feel subtle and buttery smooth. At it’s worst, it feels forced and stuttery. Since we’re building the sample for modern web browseres we can use hardware accelerated properties and the requestAnimationFrame loop to ensure a solid 60fps render speed. For this example, these are the key elements used to achieve 60fps:
- CSS transforms – Modern web browsers hardware accelerate certain css properties including transforms, animations, and transitions. We use transforms to position the layers to ensure a silky smooth effect.
- requestAnimationFrame – Optimizing drawing in a browser can get hairy. Luckily the requestAnimationFrame loop strings concurrent animations together into a single reflow and repaint cycle, leading to higher fidelity animation. Paul Irish wrote a great post on the topic.
- TweenLite – TweenLite has become my animation toolkit of choice. If possible, it ensures all animated properties get hardware accelerated. I used it in this sample mostly for syntax convenience.
Working with the Accelerometer in HTML5
To adopt the previous sample to a mobile device is relatively easy. Since we’ve already finessed our animations for hardware acceleration we’re half way there. The last step is replacing the mouse-tracking code with values from the accelerometer.
Device Orientation API
Some mobile devices allow access to various hardware sensors via the web browser. At the moment, the accelerometer and gyroscope are well supported in iOS and Android devices. For this sample we targeted Mobile Safari and Chrome for iOS7.
To access the devices’s accelerometer values we used the DeviceOrientation API. This was the first time I’ve played around with this api, but it turned out to be pretty easy to work with. I won’t go into the details of the Alpha, Beta, Gamma values here, but feel free to read up on them here or see them in action here.
This is the gist of how the code looks
Putting it all together
Once we capture the accelerometer values we use the same logic to offset the UI layers. The final effect can be seen in the video below:
Try it yourself
If you’d like to see the effect in action navigate to the link below in on your device. *Sorry* Android users, we’ll catch you next time :/
The Fine Print
If you’re interested in using the code or extending the sample for your own needs feel free – no attribution necessary. If you mention this blog or our twitter handles (@truthlabschi @eklimcz) I wouldn’t be mad :).
I’ll be the first to admit the code isn’t exactly bullet-proof. It’s meant to be a proof of concept. *use at your own risk*…you know the drill..
You can download the code from GitHub HERE.