<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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 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 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; }

window.onscroll = function() { if (window.pageYOffset > 0) { document.getElementById("parallax").style.fontSize = (window.pageYOffset/20)*.1+"em"; } }