Parallaxing Parallax on iOS
GitHub has a bit of a friendly competition complex. When Corey Johnson released URL Hunter, there was a lot of talk about how that minigame could be topped. Cameron McEfee, the famed designer behind all of the parallax effects on GitHub’s site (the 404 page, the 500 page, the about page, and so on) took Corey’s URL bar game and parallaxed it. In doing all of this parallax work, Cameron open sourced his parallax plugin for jQuery itself: plax.
Parallax is a perspective-based animation technique: move your mouse and you simulate moving your frame of reference around. Cameron’s plax only worked based on mouse movement, though:
…which means all of these gorgeous animations of this handsome fellow didn’t work on your favorite iOS device. What a bummer. So I parallaxed his parallax and added support for the accelerometer and gyroscope present in iPhones and iPads, which Apple generously gave us access to in the iOS 4.3 release last year.
So now we can do cool things to GitHub’s Cloud:
Safari’s Accelerometer Support
It’s really pretty easy to add this to your own apps and libraries. Apple
exposes the accelerometer to us through DeviceMotionEvent
, a class that
handles “signification change in
motion”.
(You might also want to take a look at
DeviceOrientationEvent,
too.) The change to plax is pretty straightforward, but it’s really just a
matter of handling the ondevicemotion
event and grabbing the values from that
motion:
window.ondevicemotion = function(e) {
x = e.rotationRate.beta
y = e.rotationRate.alpha
}
In this case, rotationRate
is the rate of rotation, which is a bit more
relevant for parallax. You can also grab rotationRate.gamma
, which is the
rotation positive out of the screen on the z axis. Unfortunately rotationRate
is for those devices with gyroscopes: in other words, iPhone 4 and above. Once
we have the rotation rate pulled from the phone we can pipe that information
into plax and plax handles the coordination of layers based on that.
Depending on your use case, you also might want to take a look at
accelerationIncludingGravity
, which gives you a measurement of the
acceleration of the movement happening on the device.
Todo
This at least gives us some real-world parallax support on iOS, which is great. There’s some improvements that could be made to retaining rotation position in parallax (which would give it more of a realistic feel), and there’s oodles of accelerometers in Android phones and in laptops, too. If you’re looking for a fun hack day, you might want to build in support for those devices (or create a library abstraction for movement in JavaScript!) and send us a pull request.