There’s a lot of parallax JavaScript libraries out there. One of them is Parallax.js, originally made by Matthew Wagerfield. This one not only does parallax effects with different html layers, but it also reacts to the gyroscope on your device (when no motion detection hardware is available, it reacts to the cursor).

After my previous project Playground 2, I played with WebRTC (in order to see how I could manage to use the peer to peer features of WebRTC) and I found a headtracking library called headtrackr, made in JavaScript by Audun Mathias Øygard, based on WebRTC. I decided to make something out of it and a colleague of mine gave me the idea to mix and match it in some way with some parallax effects (that’s how I found Parallax.js in the first place).

I forked Parallax.js and added the headtracking support (with multiple callbacks such as when the camera is ready or not, when your face is detected or lost …) and everything is retro-compatible. You can see a demo here and I updated the API documentation on the readme.

Try Parallax.js, now with Headtracking

Have fun tilting your face in front of your computer !

Tophe

• Parallax.js with headtracking – demo
• Parallax.js with headtracking – sources on github
• headtrackr.js – headtracking JavaScript library – Audun Mathias Øygard
• Original Parallax.js repository – Matthew Wagerfield
• Original blog post (fr)