parallax-css.css

/**
 *
 *
 * @link http://demosthenes.info/blog/832/Easy-Parallax-Effects-With-Em
 */
div#parallax {
background-image: url(blurred-background-small.jpg);
background-size: cover; 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);
}
#candles { left: 5%; bottom: 22em; }
#cherry { left: 28%; z-index: 3; bottom: 8em; }
#pagoda { left: 55%; bottom: 12em; }

parallax-js.js

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

parallax-markup.html

<--

-->
<div id="parallax">
<h1>Simple EM Parallax Technique</h1>
<img src="candles.jpg" alt id=candles>
<img src="cherry-tree.jpg" alt id=cherry>
<img src="pagoda-surrounded-by-trees.jpg" alt id=pagoda>
</div>