JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

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

CSS

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

JavaScript

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        var x = Math.round(event.beta || 0);
        var y = Math.round(event.gamma || 0);
        $('#contentarea').css({'background-position-x':x,
                               'background-position-y':y});
        
        $("#debug").text(x+":"+y);
    }, false);
}else{
  $("#debug").text("DeviceOrientationEventがサポートされていません");
}