parallax.js

/*--------------------------
 * Simple Parallax script
 * 
 * Usage: just add data-parallax="scroll" to the the element you want to have parallax effect
 * make sure that the element has background-image and height dimension set.
 * Example: <div data-parallax="scroll" style="background-image: url("path/to/img"); height: 300px;"></div>
--------------------------*/
var parallaxSection = document.querySelectorAll('[data-parallax="scroll"]');
//Set default style for the parallax element
parallaxSection.forEach(function(el,index,array) {
  el.style.backgroundSize = "cover";
  el.style.backgroundRepeat = "no-repeat";
  el.style.backgroundPosition = "bottom center";
});
//Listen to scroll event and update background position on scroll
window.addEventListener("scroll", function() {
  var scrolledHeight= window.pageYOffset;
  parallaxSection.forEach(function(el,index,array) {
    var limit= el.offsetTop+ el.offsetHeight;
	el.style.backgroundPosition = "bottom -" + (scrolledHeight - el.offsetTop) /2+ "px center";
  });
});