Code:
CSS:@import url(http://fonts.googleapis.com/css?family=Nunito);.container,.content,body{margin:0}body,html{height:100%}html{overflow:hidden}body{padding:0;perspective:1px;transform-style:preserve-3d;overflow-y:scroll;overflow-x:hidden;font-family:Nunito}h1{font-size:250%}p{font-size:140%;line-height:150%;color:#333}.slide{position:relative;padding:25vh 10%;min-height:100vh;width:100vw;box-sizing:border-box;box-shadow:0 -1px 10px rgba(0,0,0,.7);transform-style:inherit}.slide:before,img{position:absolute}.title,img{border-radius:5px;background:rgba(240,230,220,.7);box-shadow:0 0 8px rgba(0,0,0,.7)}#slide1:before,#slide3:before{transform:translateZ(-1px) scale(2);z-index:-1}img{top:50%;left:35%;width:320px;height:240px;transform:translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);padding:10px}img:last-of-type{transform:translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg)}.slide:before{content:"";top:0;bottom:0;left:0;right:0}.title{width:50%;padding:5%}.slide:nth-child(2n) .title{margin-left:0;margin-right:auto}.slide:nth-child(2n+1) .title{margin-left:auto;margin-right:0}.slide,.slide:before{background:50% 50%/cover}#slide2,#title{background-attachment:fixed}.header{text-align:center;font-size:175%;color:#fff;text-shadow:0 2px 2px #000}#title{background-image:url(http://lorempixel.com/output/abstract-q-c-640-480-6.jpg)}#slide1:before{background-image:url(http://lorempixel.com/output/abstract-q-c-640-480-4.jpg)}#slide2{background-image:url(http://lorempixel.com/output/abstract-q-c-640-480-3.jpg)}#slide3:before{background-image:url(http://lorempixel.com/output/abstract-q-c-640-480-5.jpg)}#slide4{background:#222}[