Simple jQuery Plugin To Fade Out Panels As You Scroll Down

A tiny jQuery plugin used to fade out content panels with a background parallax effect as you scroll past them. The goal is to use jQuery to detect the scroll event and add CSS opacity property to panels which are about to leave the viewport.

How to use it:

1. Create content panels on your web page.

<div class="panel">
  ...
</div>

<div class="panel">
  ...
</div>

<div class="panel">
  ...
</div>

...

2. Add a parallax background image into your document body.

body {
  background: url(parallax.jpg) repeat fixed;
}

3. Load the necessary jQuery library at the end of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

4. The Javascript to enable the background parallax & panel fading effect as your scroll down the page.

$(window).on('scroll', function(){
  var curPos = $(window).scrollTop();
  $('body').css('background-position', '0 -' + curPos * .1 + 'px');
  fadePanels(curPos);
}).scroll();

function fadePanels(curPos) {
  var panels = $('.panel');
  
  for (var i = 0; i < panels.length; i++) {
    var offsetTop = $(panels[i]).offset().top;
    var halfPanel = (($(panels[i]).height() + 80) / 2) // half the panel height + padding
    var offsetHalf = halfPanel + offsetTop;
 
    $(panels[i]).attr('data-scroll-top' , offsetTop);
    $(panels[i]).attr('data-scroll-half', offsetHalf);
   
    var j = (curPos - offsetHalf) / halfPanel;
    
    if (curPos > $(panels[i]).data('scroll-half')) {
      $(panels[i]).css('opacity', 1 - (j));
    } else {
      $(panels[i]).css('opacity', '1');
    }
  }
}

---

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