Relative Heading Panning

Sample Project using Relative Heading

See the full list of sample projects.

This sample HTML file generates a page with a car the moves around a circle as you walk

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <style type="text/css">
          body,html{
                height:100%;
            }
            div{
                position: absolute;
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                background-image: url('./ruth-mtn3.jpg');
                background-position: 50% 50%;
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <div id="image"></div>
        <script type="text/javascript" src="../lib/motionstack-vlatest.js"></script>
        <script>
            function map_range(value, low1, high1, low2, high2) {
                return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
            }
            var imageElement = document.getElementById("image");

            var relativeHeading = new MotionStack.RelativeHeading({continuous: true});
            relativeHeading.start(function (e) {
                if (Math.abs(e.angle) > 180) {
                    return;
                }
                var x = 100 - map_range(e.angle,-180,180,0,100);
                imageElement.style.backgroundPosition = x+"% 50%";
            });
        </script>
    </body>
</html>