<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="parallax">
	<h1>Simple EM Parallax Technique</h1>
	<img src="candles.jpg" alt>
	<img src="cherry-tree.jpg" alt>
	<img src="pagoda-surrounded-by-trees.jpg" alt>
</div>
@import url(https://fonts.googleapis.com/css?family=Oswald);
body { 
  margin: 0;
  font-family: Oswald, Avenir, sans-serif;
  min-height: 200vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/blurred-background-small.jpg
);
	background-size: cover;
  background-attachment: fixed;
}
div#parallax {
	padding-top: 62.5%; 
	overflow: hidden;
	position: relative;
	font-size: .1em;
}
div#parallax * { 
  position: absolute; 
}
div#parallax img {
	width: 40%; height: auto;
	box-shadow: 0 .2em 8px 4px rgba(0,0,0,0.5);
}
div#parallax h1 { 
	font-size:3rem; 
  color: #fff; z-index: 2;
	top: 0; 
  text-transform: uppercase;
	width: 100%; 
  text-align: center;
	text-shadow: 0 .2em 5px rgba(0,0,0,0.4); 
  position: fixed;
}
#parallax img:nth-of-type(1) {
	left: 5%; 
  bottom: 22em;
}
#parallax img:nth-of-type(2) {
	left: 28%; 
  z-index: 3; 
  bottom: 8em;
}
#parallax img:nth-of-type(3) {
	left: 55%; bottom: 12em;
}
View Compiled
window.onscroll = function() {
	if (window.pageYOffset > 0) {		document.getElementById("parallax").style.fontSize = (window.pageYOffset/20)*.1+"em";
		}
	}
Rerun