Fade Out Hero Header On Scroll - jQuery headerFade.js

headerFade.js is a dead simple jQuery plugin which makes it possible to fade out hero header on scroll using CSS transform, transition and opacity properties.

How to use it:

1. Create a hero header for your web page.

<section id="hero">
  <div id="hero-mask"></div>
  <header id="title-fade">
    <h1>Here is some header text</h1>
  </header>
</section>

2. The example CSS for the hero header.

header {
  position: relative;
  top: 50%;
 transform: translate(0, -50%)  z-index: 2;
}

#hero-mask {
  background-color: rgba(0,0,0,0.7);
  height: inherit;
  left: 0;
  position: absolute;
  opacity: 0;
  top: 0;
  transform: translate3d(0, 0, 0);
  width: 100%;
}

3. Include jQuery library and the JavaScript file jQuery headerFade.js right before the closing body tag.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="headerFade.js"></script>

4. Initialize the plugin on document ready and you're done.

$(document).ready(function() {
  $('#hero').heroFade();
});

---

This awesome jQuery plugin is developed by beeeees. For more Advanced Usages, please check the demo page or visit the official website.