JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

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

CSS

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

JavaScript

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