<div id="container" class="container">
    <div id="scene" class="scene">
      <div data-depth="1.00"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/layer1.png"></div>
      <div data-depth="0.80"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/layer2.png"></div>
      <div data-depth="0.60"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/layer3.png"></div>
      <div data-depth="0.40"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/layer4.png"></div>
      <div data-depth="0.20"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/layer5.png"></div>
      <div data-depth="0.00"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/layer6.png"></div>
    </div>
  </div>

<a href="get-web.site" class="link">get-web.site</a>
body {
  min-height: 700px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.link {
  position: absolute;
  left: 10px;
  top: 10px;
  color: #ccc;
  text-decoration: none;
  text-transform: uppercase;
}
  // https://github.com/wagerfield/parallax
  // https://matthew.wagerfield.com/parallax/
  var scene = document.getElementById('scene');
  var parallax = new Parallax(scene);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js