Mobile Orientation in Javascript and CSS

We want to create a simple tool to have a Pseudo 3D effect for html elements, mainly buttons but this should be available for all kind of elements.

The effect, e.g. the shadow, should change when you move your mobile phone.

It should be possible to modify the shadow depending on the tilt of the mobile device as well as the margin of the object.

Main Javascript Function

This is the main Javascript function to get the orientation and all related information when used on mobile devices:

if (window.DeviceOrientationEvent) {
	window.addEventListener('deviceorientation', function(eventData) {
		// gamma is the left-to-right tilt in degrees, where right is positive
		var tiltLR = Math.round(eventData.gamma);
		// beta is the front-to-back tilt in degrees, where front is positive
		var tiltFB = Math.round(eventData.beta);
		// alpha is the compass direction the device is facing in degrees
		var dir = Math.round(eventData.alpha);
		// call our orientation event handler
		deviceOrientationHandler(tiltLR, tiltFB, dir);

	}, false);
} else {
	// device orientation not supported
	console.log('DeviceOrientation is NOT supported');
}

This function gives us all the values we need and we can apply it to our use case now.

Demo of the Orientation

This demo is showing the values we get from the function above.

To display the values in the container with the id orientationId we just use:

function deviceOrientationHandler(tiltLR, tiltFB, dir) {
	document.getElementById("orientationId").innerHTML = 'Left/Right:' + tiltLR + 'Front/Back:' + tiltFB + 'Direction:' + dir + 'Orientation:' + window.orientation;
}

Using the orientation to modify CSS

Next we want to use our parameters and change the shadow of HTML elements. The easiest way would be just modifying the style of our element but this approach is not very scalable.

The best option would be to create a dynamic class which is automatically adapting the shadow and margin and we just use this class on whatever object we want to.

First of all we create a stylesheet which we are going to modify afterwards. Let's create a function which does a new stylesheet for us:

function createStyleSheet() {
	// Create the style tag
	var style = document.createElement("style");
	// WebKit hack required
	style.appendChild(document.createTextNode(""));
	// Add the style element to the page
	document.head.appendChild(style);
	return (style.sheet);
};

Now we have our own stylesheet and create just one class called mobileshadow which is modified depending on the mobile device movement. Just view the source of this page to see the final code.

Demo with Pseudo 3D buttons

In this demo we use the function from above and create some buttons and apply the mobileshadow class to it.

The effect on mobile devices shows the shadow and the buttons moving when the phone is moved.

And without any background:

Thats it. Good luck.