<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: rgb(255, 255, 255);
        font-weight: bold;
        font-size: 30px;
      }
      #container {
        position: absolute;
        left: 200px;
        top: 200px;
      }
      .selectable {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity 1.5s;
      }

      /* Styles used by the first slide */
      .transform-test-div {
        transform: translateY(100px) translateX(100px);
        background-color: rgb(160, 160, 255);
        font-size: 20px;
        width: 100px;
        height: 100px;
      }

      /* Styles used by the second slide */
      .level-1 {
        font-size: 100px;
        background-color: #40c4ff;
      }
      .level-2 {
        background-color: #00b0ff;
      }
      .level-3 {
        background-color: #0091ea;
      }

      /* Styles used by the third slide */
      #opacity-test-root {
        width: 400px;
        height: 400px;
        background-color: rgb(255, 0, 0);
        opacity: 1;
        font-size: 16px;
      }

      .opacity-test-div {
        font-size: 2em;
        width: 2.5em;
        height: 2.5em;
        background-color: rgb(0, 0, 255);
        opacity: 0.5;
      }
    </style>
  </head>

  <body>
    <div id="container">
      <div class="selectable">
        <div class="transform-test-div">
          <div class = "transform-test-div">
          </div>
        </div>
      </div>

      <div class="selectable">
        <span class="level-1">
          I
          <span class="level-2">
            II
            <div class="level-3">III</div>
            II
          </span>
          I
        </span>
      </div>

      <div class="selectable">
        <div id="opacity-test-root">
          <div class="opacity-test-div">
            <div class="opacity-test-div">
              <div class="opacity-test-div">
                Hello?
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      var selected_index = 1;
      var selectables = null;

      function Refresh() {
        // Hide everything except for the selected div.
        for (var i = 0; i < selectables.length; ++i) {
          if (i == selected_index) {
            selectables[i].style.opacity = 1;
          } else {
            selectables[i].style.opacity = 0;
          }
        }
      }

      window.addEventListener('load', function () {
        // Initialize our set of selectable items.
        selectables = document.getElementsByClassName('selectable');
        Refresh();
      });

      document.addEventListener('keydown', function (e) {
        if (e.keyCode == 38) {
          // Up key was pressed.
          selected_index -= 1;
          if (selected_index < 0) {
            selected_index = selectables.length - 1;
          }
          Refresh();
        } else if (e.keyCode == 40) {
          // Down key was pressed.
          selected_index += 1;
          if (selected_index >= selectables.length) {
            selected_index = 0;
          }
          Refresh();
        }
      });
    </script>
  </body>
</html>