Simple JavaScript Blur Effect on for Backgrounds

blur-backgrounds.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
.wrapper {
  overflow-x: hidden;
  height: 100%;
}
.section-hero {
  background-color: #000;
  width: 100%;
  height: 100%;
  overflow: hidden;
  max-width: none;
}
.section-hero video {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  object-fit: cover;
}
.section-hero .section-image {
  background-size: cover;
  height: 100%;
  width: 100%;
}

#first .section-image,
#third .section-image {
  background-image: url('http://c1.staticflickr.com/1/260/18727230704_f9a69c53cd_k.jpg');
}
#second .section-image,
#fourth .section-image {
  background-image: url('http://c1.staticflickr.com/1/259/18737578614_fc99ef005c_k.jpg');
}

blur-backgrounds.html

<div id="first" class="section-hero">
  <div class="section-image section-blur" style="pointer-events: auto; -webkit-filter: blur(0);"><!-- background image --></div>
</div>

<div id="second" class="section-hero">
  <div class="section-image section-blur" style="pointer-events: auto; -webkit-filter: blur(0);"><!-- background image --></div>
</div>

<div id="third" class="section-hero">
  <div class="section-image section-blur" style="pointer-events: auto; -webkit-filter: blur(0);"><!-- background image --></div>
</div>

<div id="fourth" class="section-hero">
  <div class="section-image section-blur" style="pointer-events: auto; -webkit-filter: blur(0);"><!-- background image --></div>
</div>

blur-backgrounds.js

function blurEffect(elem) {
  var w, el, offset, blur, transform;
  
  w = window.pageYOffset;
  el = document.querySelector(elem);
  offset = el.offsetTop;

  blur = (w - offset) / 2 * 0.01;
  transform = (w - offset) / 8 * 0.001 + 1;

  if (w > offset) {
    el.style["-webkit-filter"] = 'blur(' + blur + 'px)';
    el.style.transform = 'translate3d(0px, 0px, 0px) scale3d('+transform+', '+transform+', 1.1)';
  }
}

window.addEventListener('scroll', function() {
  blurEffect('#first .section-blur');
  blurEffect('#second .section-blur');
  blurEffect('#third .section-blur');
});

Demo can be found here: http://www.justinhough.com/demos/blur-backgrounds.html