Have you ever seen website UI reacting to device’s orientation? If not then maybe it is time to browse a little, there are some really cool effects that you can achieve by triggering visual changes with device motion. Let’s dive into a case of making images tilt while we angle our phone.
Detecting mobile device orientation
These days increasing number of mobile browsers support DeviceOrientationEvent which gives us the data we need about current device orientation. For the purpose of this task we need only one property that this event object – DeviceOrientationEvent.gamma. It is a number that represents the device’s motion around the y axis so simply speaking its left to right rotation. Its value ranges from -90 to 90. We can listen to that event on the window object like this:
window.addEventListener("deviceorientation", function(event) {
console.log(event.gamma);
});
If you look at the returned value you will notice that it is super accurate, covering lot of decimal spaces and reacting to even slightest device movements. We do not need this to be so precise (actually we do not want it) so we can use the Math.round method to round it to the nearest integer which will be handy when we will use this data to animate the image.
window.addEventListener("deviceorientation", function(event) {
let position = Math.round(event.gamma);
});
Setting up image tilt CSS transformation
OK, so we receive our client’s Y-axis angle, now it’s time to set up some initial css and html. We will have our image wrapped to set some perspective and we need to set the transition property to achieve smoother transform animations, which we will use to animate our element with. The basic HTML/CSS setup would look like this:
<body>
<div class="wrapper">
<img id="tiltable" src="http://i64.tinypic.com/2cpte9f.jpg"/>
</div>
</body>
body {
width:100%;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background-color:black;
}
.wrapper {
perspective: 15px;
}
#tiltable {
height:400px;
transition: transform 0.5s;
backface-visibility: hidden;
}
Triggering animation when device orientation changes
Now it’s time to connect the dots and make sure our event triggers the animation. Let’s go back to our event handler and throw in some code.
const inner = document.getElementById("inner");
const limit = 45;
window.addEventListener("deviceorientation", function(event) {
let position = Math.round(event.gamma);
if (Math.abs(position) > limit) {
if (position > limit) {
position = limit;
} else {
position = -limit;
}
}
position = position / -100;
let style = "rotateY(" + position + "deg)";
inner.style.transform = style;
});
As you can see I included some additional stuff, first there is this if else statement which limits the position value for both positive and negative number scenario. This is to set out limits to element css rotation degree which we will use to animate the image. Next we transform the position variable by dividing it by -100 to rotate by fractions of deg only and in opposite direction than the device angle to achieve desired visual effect. Finally we assign value to our style variable which uses the position variable to construct the css property value for transform property of the element we want to rotate which we then use to set this property via element.style property of our selected HTML element.
Making things smoother
Well we are almost there but things are still a bit rough on the edges. We would like our animation not to be triggered every single time the device changes its orientation. We can achieve this by implementing simple counter function which will limit the animation to be triggered every n-th time the event fires only, every 10th time in our case. You can find complete, working example below on the embeded codepen.
See the Pen
Tilting images with device orientation by codeVerses (@codeVerses)
on CodePen.