title: Nice scrolling parallax effect isn't working
body: <p>This is the link to the website: <a href="http://codepen.io/zabielski/pen/MyoBaY/" rel="nofollow">http://codepen.io/zabielski/pen/MyoBaY/</a></p>
  
  <p>I am following the instructions and code from this website to try and get a similar scrolling parallax effect. Below is my HTML, CSS and JavaScript code (basically just copying but with my own images and stuff).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;!--Meta equiv for the whole web page to be emulated into IE straight from the chrome styling, If this is not done, then the whole webpage is green instead of the gray and orange and the text on the opage is shoved onto the far left side of the page.--&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7"/&gt;
  &lt;!--Link to Favicon--&gt;
  &lt;link rel="shortcut icon" type="image/x-icon" href="Favicon/Ulearn.ico"&gt;
  &lt;!--Links to CSS style sheet--&gt;
  &lt;link rel="stylesheet" type="text/css" href="CSS style sheets/Main style sheet.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="CSS style sheets/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="CSS style sheets/animate.min.css"&gt;
  &lt;!--Links to JavaScript external sheets--&gt;
  &lt;script type="text/javascript" src="JavaScript sheets/Main javascript.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="JavaScript sheets/jquery-2.2.3.js"&gt;&lt;/script&gt;
  &lt;head&gt;
  &lt;span class="header"&gt;Physics Level 3&lt;/span&gt;
  &lt;!--Meta and links to make sure the webpage is dynamic--&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id='hero'&gt;
    &lt;div class='layer-1 layer' data-depth='0.20' data-type='parallax'&gt;&lt;/div&gt;
    &lt;div class='layer-2 layer' data-depth='0.50' data-type='parallax'&gt;&lt;/div&gt;
    &lt;div class='layer-3 layer' data-depth='0.80' data-type='parallax'&gt;&lt;/div&gt;
    &lt;div class='layer-4 layer' data-depth='1.00' data-type='parallax'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;
  
  
  
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  #hero {
    height: 1000px;
    overflow: hidden;
    position: relative;
  }
  .header {
      background-color: white;
      border-style: solid;
      border-width: 0px;
      position: absolute;
      text-align: left;
      left: 1%;
      top: 2.4%;
      width: 97%;
      padding-top: 1%;
      padding-bottom: 1%;
      padding-left: 0.7%;
      padding-right: 0.2%;
      z-index: 1;
  }
  .layer {
      background-position: center;
      background-size: auto;
      width: 100%;
      height: 800px;
      position: fixed;
      z-index: -1;
  }
  .layer-1 {
      background-image: url("background-last.jpg");
  }
  .layer-2 {
      background-image: url("background-middle.png");
      background-repeat: no-repeat;
      background-position: center;
  }
  .layer-3 {
      background-image: url("background-top.png");
      background-repeat: no-repeat;
  }
  .layer-4 {
      background-image: url("background-verytop.png");
  }
  
  
  (function () {
      window.addEventListener('scroll', function (event) {
          var depth, i, layer, layers, len, movement, topDistance, translate3d;
          topDistance = this.pageYOffset;
          layers = document.querySelectorAll('[data-type=\'parallax\']');
          for (i = 0, len = layers.length; i &lt; len; i++) {
              if (window.CP.shouldStopExecution(1)) {
                  break;
              }
              layer = layers[i];
              depth = layer.getAttribute('data-depth');
              movement = -(topDistance * depth);
              translate3d = 'translate3d(0, ' + movement + 'px, 0)';
              layer.style['-webkit-transform'] = translate3d;
              layer.style['-moz-transform'] = translate3d;
              layer.style['-ms-transform'] = translate3d;
              layer.style['-o-transform'] = translate3d;
              layer.style.transform = translate3d;
          }
          window.CP.exitedLoop(1);
      });
  }.call(this));
  </code></pre>