Device orientation augmented UI the CSS way


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.

Matteo Spinelli's Cubiq.org稿源:Matteo Spinelli's Cubiq.org (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动互联 » Device orientation augmented UI the CSS way

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录