JSFiddle - React, Tailwind, and code Playground

by Sir_Pepe

HTML

<div id="box"></div>

<pre id="info">Info</pre>

CSS

#info {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
}

#box {
    width: 80px;
    height: 80px;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

var box  = $('#box');
var info = $('#info');
window.addEventListener('deviceorientation', function(evt){
    var oldX = parseInt(box.offset().left);
    var oldY = parseInt(box.offset().top);
    var newX = oldX + evt.gamma / 5;
    var newY = oldY + evt.beta / 5;
    box.css({
        'top': newY + 'px',
        'left': newX + 'px'
    });
    info.html(newX + 'px / ' + newY + 'px');
}, false);