JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

DeviceOrientationEvent DEMO
<div id="contentarea"></div> 
<div id="log"></div>

CSS

#contentarea{
    width:300px;
    height:300px;
    border:1px red solid;
    background-image:url(http://placehold.it/300x300);
}

JavaScript

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        var b = Math.round(event.beta);
        var g = Math.round(event.gamma);
       
        $('#contentarea').css({'background-position-x':b,
                               'background-position-y':g});
        
        $("#log").text(b+":"+g);
    }, false);
}