title: multiple layer parallax scrolling content issue javascript
body: <p>I'm trying to get a parallax multiple-layer scroll-section in my website, but it seems like I have an issue with the javascript. This is the tutorial I am following: <a href="https://medium.com/@PatrykZabielski/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27" rel="nofollow noreferrer">How to make Multi-Layered Parallax Illustration with CSS &amp; Javascript</a> </p>
  
  <p>I want the exact same behaviour only as a Section below the header/hero. Here is the code I'm using:</p>
  
  <pre><code> &lt;section id="parallax-section"&gt;
          &lt;div id="hero"&gt;
          &lt;div class="layer-bg layer" data-depth='0.10' data-type='parallax'&gt;&lt;/div&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-overlay layer" data-depth='0.85' data-type='parallaenter code herex'&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;/section&gt;  
  </code></pre>
  
  <p>But it does't really work as it should, I think it has something to do with movement or offset, but I'm a total newbie </p>
  
  <pre><code>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++) {
        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;
      }
    });
  
  }).call(this);
  </code></pre>
  
  <p>I already tried to put it on the top as Hero, no Problem. Here's a screenshot.</p>
  
  <p><img src="https://i.stack.imgur.com/0TRPM.jpg" alt="Here&#39;s a screenshot"></p>
  
  <p>I'd really appreciate if there's anybody out there who can help.</p>