[Javascript] deviceorientation - Move DIV on tilt on the Mobile phone (휴대폰을 기울였을 때 div 이동시키기)

최근 나오는 스마트폰의 브라우저에서 지원하는
deviceorientation 를 가지고 이동하는 DIV를 만들어 봤다.



핸드폰을 기울여 보세요.
(do your Mobile phone tilt)

Source

<div id="wrapperDiv">
<div id="moveDiv">
</div>
</div>

<style type="text/css">
#wrapperDiv {
 border: solid 1px red;
 position: relative;
 width: 100%; height: 20px;
 margin: 0px;
}

#moveDiv {
 background: blue;
 position: absolute;
 width: 20px; height: 20px;
 transition: 500ms;
 -webkit-transition: 500ms;
}
</style>

<script type="text/javascript">
function tiltHandler(e) {

 
 /** 기울기(tilt) 계산 **/
 var tiltX = 0;
 var tiltY = 0;
 var current = e.accelerationIncludingGravity;
 var facingUp = -1;
 if (current.z > 0) {
  facingUp = +1;
 }
 tiltX = Math.round((current.x / 9.81) * -90)* ( Math.PI/ 180);
 tiltY = Math.round((current.y / 9.81) * 90 * facingUp)* ( Math.PI/ 180);
 if (window.navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) {
  tiltX = tiltX * -1.0;
 }
 /**********************/ 
    
 var x = 0 ;
 var orientation = window.orientation == undefined ? 0 : window.orientation;
 switch(orientation) {
  case 0: x = tiltX; break;
  case 90: x = tiltY; break;
  case 180: x = -tiltX; break;
  case -90:
  case 270: x = -tiltY; break;
  default: x = tiltX; break;
 }

    if ( x > 0.4) {
     moveDiv.style.left = maxWidth - 20 + 'px';
    }
    
    if ( x < -0.4) {
     moveDiv.style.left = '0px';
    }
}

var maxWidth = 0;
var wrapperDiv = document.getElementById('wrapperDiv');
var moveDiv = document.getElementById('moveDiv');

window.addEventListener('load', function(){
 
 if (typeof window.addEventListener != "undefined") {
  window.addEventListener('devicemotion', tiltHandler);
 }
 
 wrapperDiv.parentElement.style.margin = '0px';
 wrapperDiv.style.width = wrapperDiv.parentElement.offsetWidth + 'px';
 
 maxWidth = wrapperDiv.parentElement.offsetWidth;
 
});

</script>