Pedometer Walk to Animate

Sample Project using the pedometer

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>
  <style type="text/css">

    html, body {
      height: 100vh;
      width: 100vw;
      background-color: black;
      margin: 0;
    }

    @media (orientation: landscape) {
      .container {
        height: 100vh;
        width: 100vh;
      }
    }
    @media (orientation: portrait) {
      .container {
        height: 100vw;
        width: 100vw;
      }
    }

    .container {
      position: relative;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      background-color: gray;
      will-change: transform;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      -webkit-transition: -webkit-transform 1s ease;
      transition: transform 1s ease;
      transform-origin: center center;
    }

    .car {
      position: relative;
      width: 20%;
      top: 50%;
      left: -5%;
      -webkit-transform: translateY(-50%) rotateZ(-90deg);
      transform: translateY(-50%) rotateZ(-90deg);
    }

    .steps {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      color: rebeccapurple;
      font-size: 3rem;
    }
  </style>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
</head>
<body>

  <div class="container">
    <img class="car" src="https://openclipart.org/download/190173/SimplePurpleCarTopView.svg" />
  </div>
  <div class="steps">Walk!</div>

  <script type="text/javascript" src="../lib/motionstack-vlatest.js"></script>
  <script type="text/javascript">

    var container = document.querySelector(".container"),
        steps = document.querySelector(".steps"),
        currentPosition = 0,
        rotate = 45; //degrees

    var pedometer = new MotionStack.Pedometer();

    pedometer.start(function(e) {
      container.style.webkitTransform = "translateX(-50%) translateY(-50%) rotateZ(" + (currentPosition += rotate) + "deg)";
      container.style.transform = "translateX(-50%) translateY(-50%) rotateZ(" + (currentPosition += rotate) + "deg)";
      steps.textContent = "Steps: " + e.stepCount;
    });

  </script>

</body>
</html>