> Device orientation augmented UI the CSS way

aui

Someone recently discovered a nice GUI touch in the upcoming iPhone operating system (iOS6), metallic button reflections change as you tilt the device (video on youtube). Can it be done on the browser with just CSS? Of course it can, with a pinch of JS.

Here’s the demo page [lab.cubiq.org/aui], or scan the QR code. Open it on iPhone or iPad and tilt the device to see roughly the same effect of the native Apple control. The demo actually also works on Chrome for desktop if your computer is provided with a motion sensor (Mac Book Pros have it and I’m sure other laptops as well).

First challenge was to build the knob with plain CSS. The talented designer @Simurai suggested to use an array of radial gradients and the end result is pretty decent.

Then we hook at the device orientation event:

window.addEventListener('deviceorientation', orientationChange, false);

function orientationChange (e) {
	orientationX = e.beta;
	orientationY = e.gamma;
	orientationZ = e.alpha;
}

Note that this is not the orientation change event, which occurs when you go from landscape to portrait and vice-versa. deviceorientation returns the three angles representing the orientation/tilt of the device.

The orientationChange function is invoked repeatedly, so it is not a good idea to make complex computation inside of it. Instead I just set 3 global variables that I can check later inside a setTimeout loop.

The magic happens in the tilt() function:

knob.style.webkitTransform = 'rotate(' + (orientationX - 30) + 'deg) translateZ(0)';
hl1.style.webkitTransform = 'rotate(' + (orientationY/1.5 + 30 + orientationX) + 'deg) translateZ(0)';
hl2.style.webkitTransform = 'rotate(' + (30 - orientationY/1.5 + orientationX) + 'deg) translateZ(0)';

if ( orientationY > 0 ) {
	hl1.style.opacity = .3 - Math.abs(orientationY) / 90 * .3;
	hl2.style.opacity = Math.abs(orientationY) / 90 * .8 + .3;
} else if ( orientationY < 0 ) {
	hl2.style.opacity = .3 - Math.abs(orientationY) / 90 * .3;
	hl1.style.opacity = Math.abs(orientationY) / 90 * .8 + .3;
}

By rotating and varying the opacity of the knob elements you get the reflections illusion. I bet that with some more time spent on the CSS you can get even better results.

To make things more interesting I also added some perspective to text above the knob. Basically summing up various layers of text-shadow you get a fake but convincing 3d effect. It is something that I already explored few months ago, in this demo I linked the 3D perspective to the device orientation.

I was curious to see the impact on battery life of this technique and I must admit that it is higher than what I would have liked it to be. I’m wondering how much the native Apple control is impacting on battery life, such a small detail might be pretty expensive, but remember that iOS6 is still in closed beta and this specific effect may not see the light once we reach golden master.

Hope you get inspired by this post.

/Share the joy

/Reactions

    • Author: Valentin
    • Posted on: 2012/06/18
    • At: 08:56

    Works on bb playbook.

    • Author: Art Korsunov
    • Posted on: 2012/06/18
    • At: 13:30

    Works on macbook pro either!