Scaled container with video and z-index

Scaled container with a video and a div above. Div appears at certain scale values

by jonahe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="scaled">
  <div id="scale-info">

  </div>
  <div class="content">
    <h2 class="below below-1">
      I have z-index 1
    </h2>

    <div class="on-top">
      <h1>
        I should always be on top.<br /> I have z-index 5
      </h1>
    </div>

    <h2 class="below below-2">
      I have z-index 3
    </h2>
    <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    <h2 class="below below-3">
      I have z-index 4
    </h2>
  </div>
</div>

CSS

body {
  
 transform: translateX(none);
}
#scaled {
  background: #cccccc;
  width: 300px;
  height: 300px;
  position: fixed;
  left: 100px;
  top: 0px;
}

.content {
  height: 100%;
  overflow: hidden;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: rgba(34, 34, 56, 0.2);
}

.below {
  position: absolute;
  width: 300px;
  height: 300px;
  right: 0px;
  top: 100px;
  background: purple;
  z-index: 1;
  opacity: 0.8;
}

.below-2 {
  z-index: 3;
  right: 100px;
}

.below-3 {
  z-index: 4;
  right: 200px;
}

.on-top {
  position: absolute;
  width: 50px;
  right:-60px;
  top: 50px;
  background: pink;
  z-index: 2000;
  padding: 20px;
}

.on-top h1 {
  font-size: 20px;
}

#video {
  position: absolute;
  z-index: 4;
  width: 300px;
  height: 300px;
  background: rgba(0, 0, 0, 0.4);
}

JavaScript

var goalScale = 130;
var startScale = 110;
var currentScale = 100;
var shouldScaleUp = true;
var container = document.getElementById("scaled");
var scaleInfo = document.getElementById("scale-info");

var onTop = document.querySelector(".content");

function forceRecalc() {
	onTop.getBoundingClientRect();
  window.getComputedStyle();
  
}
window.requestAnimationFrame(forceRecalc);


function step() {

  container.style.transform = "scale(" + (currentScale / 100) + ")";

  scaleInfo.innerText = "Scale: " + (currentScale / 100);

  if (currentScale === goalScale) {
    shouldScaleUp = false;
  }
  if (currentScale === startScale) {
    shouldScaleUp = true;
  }

  if (shouldScaleUp) {
    currentScale += 0.5;
  } else {
    currentScale -= 0.5;
  }

  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);