Are You Pondering What I'm Pondering?

I had the chance to implement an easter egg on the Photojojo Store’s mobile site. If you visit the site on a mobile device and shake the device, some confetti (or maybe more like lucky charms) will fall across the page. Here’s a simulation if you’re not on a mobile device.

Drew suggested the idea of using confetti with this cool example: confetti cover. It’s much fancier than what I put together, but it uses canvas, so it would be hard to have it overlay the store content and I was a bit worried about how it would perform on slower devices.

A bit of searching brought me to a confetti example by Pamela Fox using CSS animations. It’s pretty straight forward: each piece of confetti is a unicode character with 3 CSS animations. [Edit: Huh, looks like the triangle unicode character I used isn’t on Android Chrome.] 1 animation causes the confetti to fall, one causes it to fade out, and one animation causes it to spin. I made some minor modifications to the code to have the confetti spin 3D and clean up after itself, but otherwise it’s basically the same.

The final trick was to hook it up to a mobile device shake (this idea was suggested by Darby), which I was able to find an example of on stack overflow. Unfortunately, the DeviceOrientation Event Spec isn’t fully implemented in Android Chrome, even though it is supported by the Android Browser. What this means is that you can’t see the easter egg on Android in Chrome, but if your phone has the built in browser (not found in newer Google Experience phones like the Nexus 4), it will work.

As I was testing in different browsers, I noticed that in Safari, when you scroll the page, the confetti stops moving. I suspect this has something to do with how the hardware acceleration was implemented to make scrolling fast/smooth. I don’t see this the desktop Chrome or Android browser, but maybe that means the animation isn’t being hardware accelerated? I don’t know.