On Moonlight

Overview

A microsite for On to help promote a new running shoe.

The website displays content from the bottom of the page, in a desktop browser you can scroll up to see a parallax scrolling background and at the top of the page the new shoe is revealed.

On a mobile device, it takes advantage of the accelerometer and gyroscope data made available by the JavaScript deviceorientation event to calculate scroll position based on the angle that the device is currently held at.

Example video