Mobile Orientation in Javascript and CSS
Created: | Updated: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.