Simple parallax effect for backgrounds

gistfile1.html

<div class="section-parallax background-one">
  <div class="block">
    <h2>Section Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat ante in magna venenatis, non tempus nunc pharetra. Etiam interdum gravida urna, quis eleifend urna ornare eget. Aenean vehicula mi sit amet lectus gravida vehicula. Ut et lacinia neque.</p>
  </div>
</div>

<div class="section-parallax background-two">
  <div class="block">
    <h2>Section Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat ante in magna venenatis, non tempus nunc pharetra. Etiam interdum gravida urna, quis eleifend urna ornare eget. Aenean vehicula mi sit amet lectus gravida vehicula. Ut et lacinia neque.</p>
  </div>
</div>

<div class="section-parallax background-three">
  <div class="block">
    <h2>Section Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer placerat ante in magna venenatis, non tempus nunc pharetra. Etiam interdum gravida urna, quis eleifend urna ornare eget. Aenean vehicula mi sit amet lectus gravida vehicula. Ut et lacinia neque.</p>
  </div>
</div>

gistfile2.css

body {
  background-color: #f7f7f7;
  margin: 0;
}
.section-parallax {
  /* class only used for JavaScript */
}

h2 {
  font-size: 32px;
  font-weight: normal;
}
p {
  font-size: 18px;
}

.block {
  background-color: rgba(255,255,255,0.5);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 25px;
  text-align: center;
  width: 50%;
}
[class*="background-"] {
  background-position: center center;
  background-size: cover;
  min-height: 600px;
  padding: 75px 0;
}
.background-one {
  background-image: url('http://c2.staticflickr.com/8/7017/6846053821_97e8b17210_b.jpg');
}
.background-two {
  background-image: url('http://c2.staticflickr.com/8/7234/6898594718_f2da293516_b.jpg');
}
.background-three {
  background-image: url('http://c2.staticflickr.com/8/7063/7141494779_2863acc5a4_h.jpg');
}

parallax-backgrounds.js

$(function() {
  // Parallax Effect on Background Images
  var parallax = document.querySelectorAll(".section-parallax"),
      speed = 0.15;

  window.onscroll = function(){
    [].slice.call(parallax).forEach(function(el,i){

      var windowYOffset = window.pageYOffset - 1000,
          elementOffset = el.offsetTop,
          elBackgrounPos = "50% " + (windowYOffset - elementOffset) * speed + "px";

      el.style.backgroundPosition = elBackgrounPos;
    });
  };
});

Check out the demo here: http://www.justinhough.com/demos/parallax-background.html