<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