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
(You might also want to take a look at
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
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
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.