title: Basic Parallax effect defying physics
body: <p>I'm trying to understand how parallax works so that I no longer need to rely on code snippets from others and allow me to build more custom effects so what I did is made a very basic document.  </p>
  
  <p>A blue box, an orange square. I placed the circle behind the box, applied a tranform effect, alittle bit of CSS and all seems well. The issue I'm running into is this - shouldn't the thing furthest away from the point of view move slower than what it closer? I've played around with the numbers and cannot figure out why the circle is moving faster that the square...</p>
  
  <p>Can someone explain this to me? Am I misunderstanding something?</p>
  
  <pre><code>&lt;div id="body"&gt;
    &lt;div id="box"&gt;&lt;/div&gt;
    &lt;div id="circle"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>#body {
    height: 5000px;
    width: 100%;
    position: relative;
    perspective: 1000px;
    perspective-origin: center;
    transform-style: preserve-3d;
  }
  
  #box {
    background: blue;
    width: 400px;
    height: 400px;
    position: absolute;
    top: 400px;
    left: 500px;
    transform:translate3d(0,0,0);
    z-index: -1;
  }
  
  #circle {
    background: orange;
    width: 200px;
    height: 200px;
    border-radius: 1000px;
    position: absolute;
    top: 650px;
    left: 350px;
    transform: translate3d(0,0,-2px) scale(1);
    z-index: 1;
  }
  
  
  
  
   window.addEventListener('scroll', function(e) {
    var scrolled = window.pageYOffset;
    var box = document.querySelector('#box');
    var circle = document.querySelector('#circle');
  
    box.style.transform = `translate3d(0,${(0 + (scrolled * .75))}px, 0)`;
    circle.style.transform = `translate3d(0,${(0 + (-scrolled * .15))}px, -2px) scale(1)`;
  });
  </code></pre>
  
  <p><a href="https://codepen.io/Costa3/pen/eYOwyYe" rel="nofollow noreferrer">Link to my test file</a></p>
  
  <p>Thanks!</p>