<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);
This Pen doesn't use any external CSS resources.