Parallax & Fade-out Effects For Hero Header - jQuery parallax-scrolling

A minimal parallax scroll script that applies smooth fading out and background parallax scrolling effects to the hero header as your scroll down the webpage.

How to use it:

1. Create the hero header for your webpage.

<div id="header">
  <div id="header__background">
    <div id="header__centered">
      <h1>Page Title</h1>
    </div>
  </div>
</div>

2. The hero header must have a fixed height:

#header {
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: #000;
}

3. Add a background image to the hero header.

#header__background {
  background-image: url("background.jpg");
  background-size: cover;
  background-position: center;
  width: inherit;
  height: inherit;
  display: table;
}

4. Load the needed jQuery JavaScript library at the end of the html document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

5. The main jQuery script to activate the parallax & fade-out effects.

$(document).ready(function(){
  var moving__background = $("#header__background");
  $(window).scroll(function() { 
      moving__background.css('margin-top', ($(window).scrollTop())/3); // Parallax scrolling
      moving__background.css('opacity', 1 - ($(window).scrollTop())/moving__background.height()); // Fading out
  });
});

---

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