<div class="photo-blur"></div>
<div class="photo"></div>

<section>
  <article>
    <p>Bacon ipsum dolor amet meatloaf cow beef bresaola t-bone tail pancetta drumstick rump shoulder. Sausage doner fatback turducken short loin pig chuck. Fatback alcatra pork chop flank tri-tip ball tip turducken. Flank ribeye sirloin, ground round shank pork chop fatback short loin porchetta chicken jowl sausage boudin. Turkey ribeye tenderloin jowl short loin rump pork chop frankfurter t-bone.</p>
    <br />
    <p>Venison ball tip corned beef, drumstick pastrami cow pancetta ham salami andouille prosciutto hamburger turducken pork chop. Ham bresaola chuck shoulder short loin tail frankfurter beef ribs meatball pastrami pork strip steak pork chop. Kielbasa pork chop doner swine, rump shank drumstick ham hock beef. Salami pork rump porchetta. Hamburger biltong tri-tip, swine pork doner leberkas. Meatball cupim tail, sausage beef ribs capicola boudin picanha salami kielbasa. Bacon salami pork, tail pancetta turkey jerky alcatra.</p>
  </article>
</section>

* {
  box-sizing: border-box;
  }
html,
body {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;

  color: #fff;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 10px;
  }
.photo {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: url(https://i.imgur.com/LesDtGN.jpg) no-repeat center center; 
  background-size: cover;
  }
.photo-blur {
  position: fixed;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background: url(https://i.imgur.com/FGBZtpL.jpg) no-repeat center center;
  background-size: cover;
  opacity: 0;
  
  &::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.3);
    }
  }
section {
  position: absolute;
  z-index: 2;
  top: 0;
  margin-top: 80vh;
  width: 100%;
  background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.7) 100%);
  
  article {
    width: 500px;
    margin: 80px auto 40px;

    font-size: 1.5rem;
    font-weight: 100;
    letter-spacing: .09em;
    line-height: 1.6em;
    text-shadow: 0 1px 10px #000;
    }
}

$(window).scroll(function() {
  var blurVal;
  blurVal = $(window).scrollTop() / 150;
  return $(".photo-blur").css("opacity", blurVal);
});