SQS Parallax banner

demo -
http://5490511.hs-sites.com/free-consultation
https://www.cyclerun.com/free-consultation

========================================================
HTML
========================================================
{% if module.banner_title or module.banner_image.src %}
<div class="custom-banner-area title-{{ module.title_size }}">
  <div class="banner-bg" style="background-image:url({{ module.banner_image.src }});">
  </div>
  <div class="page-center">
    <div class="inner-group">
      {% if module.banner_title %}
      <h1 class="title">
        {{ module.banner_title }}
      </h1>
      {% endif %}
    </div>
  </div>
</div>
{% endif %}

========================================================
CSS
========================================================
.custom-banner-area {
  overflow: hidden;
  position: relative;
}
.custom-banner-area .banner-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  -webkit-transform: translatez(0);
  transform: translatez(0);
  will-change: transform;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  overflow: hidden;
  transform: translate3d(0px, -68px, 0px);
}


========================================================
JS
========================================================
$(document).ready(function(){
  var bottomVal = -( $(window).height() - $('.custom-banner-area').height() ) / 2;
  $('.custom-banner-area .banner-bg').css('bottom', bottomVal);

  var translateVal = $('.custom-header-group').height() / 2;
  $('.custom-banner-area .banner-bg').css('transform', 'translate3d(0px, -'+translateVal+'px, 0px)');

  var Parallax = $('.custom-banner-area .banner-bg');
  $(window).scroll(function() {
    var a = 0; //predefine val
    var b = $(this).scrollTop(); //each scroll val
    var c = parseInt(b * 0.5, 10); //diff. on each scroll
    var result = a + c;
    Parallax.css('backgroundPosition', '50% calc(50% + ' + result + 'px)');
  })
});