Heady_Header

A custom site header using knock-out text and parallax.

by Pete Fecteau

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="heady-wrap" class="container-full">
  <div class="row heady-row">
    <div class="col heady-col">
      <div class="heady-top">
        <img src="http://fecteau.me/wp-content/uploads/custom/heady_2.png" />
      </div>
      <div class="heady-middle"></div>
      <div class="heady-bottom"></div>
    </div>
  </div>
</div>

CSS

#heady-wrap {
  position:absolute;
  box-sizing: border-box;
}
.heady-row,
.heady-col {
  overflow:hidden;
  width: 100%;
  margin: 0;
  padding: 0 !important;
}
.heady-top {
  position: relative;
  top: -5px;
  display: block;
  width: 100%;
  z-index: 300;
}
.heady-top img {
  position:relative;
  width: 100%;
}
.heady-middle {
  position: absolute;
  top: -5px;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 1440px;
  max-height: 230px;
  background: url('http://fecteau.me/wp-content/uploads/custom/heady_11.png');
  background-size: cover;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  z-index: 200;
}
.heady-bottom {
  position: absolute;
  top: -5px;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 1440px;
  max-height: 230px;
  background: url('http://fecteau.me/wp-content/uploads/custom/heady_0.png');
  background-size: cover;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  z-index: 100;
}

JavaScript

jQuery(document).ready(function(){
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    var imgPosX = scrollTop / 1.5 + 'px';
    var imgPosA = scrollTop / -0.6 + 'px';
    var imgPosB = scrollTop / -1.2 + 'px';
    $('#heady-wrap').css('top', imgPosX);
    $('.heady-middle').css('background-position-y', imgPosA);
    $('.heady-bottom').css('background-position-y', imgPosB);
  });
})