Fade In/Out Content On Scroll - jQuery fade-scroll.js

fade-scroll.js is an extremely lightweight jQuery plugin which fades in elements when scrolled into view and fades them out on scroll up.

How to use it:

1. Load the script fade-scroll.js after jQuery library and we're ready to go.

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

2. Add the CSS class 'fade-scroll-bottom' to the containers which will be affected by the plugin.

<div class="container-fluid fade-scroll-bottom" style="background-color: #88D8B0;">

  <div class="container">
      <h2 class="display-3 text-center mb-5 pt-5 pb-3 fade-scroll-bottom" style="padding-top: 100px !important; color: #194D33;">This is a heading</h2>

      <p class="lead m-5 pb-5 pl-5 pr-5 fade-scroll-bottom" style="padding-bottom: 150px !important;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam lectus, cursus sit amet pretium at, pellentesque sed eros. Praesent gravida, libero et tempus commodo, diam leo ultricies nisi, vel eleifend massa enim vitae turpis. In hac habitasse platea dictumst. Nulla eu ante bibendum, efficitur dui nec, iaculis sapien. Nullam sollicitudin, massa eu auctor gravida, metus odio ullamcorper quam, vitae lobortis eros diam vitae ipsum. In vitae laoreet tortor. Maecenas facilisis, nisl sed tincidunt cursus, lacus turpis tincidunt justo, ut dignissim nisi nunc vel leo. Nullam aliquam lacinia porta. Vivamus fringilla odio sit amet leo fringilla blandit. Ut ullamcorper dui at dolor vestibulum malesuada. Fusce consequat auctor interdum. Donec interdum ullamcorper interdum.</p>
  </div>
  
</div>

<div class="container-fluid fade-scroll-bottom" style="background-color: #FFEEAD;">
        
  <div class="container">
      <h2 class="display-3 text-center mb-5 pt-5 pb-3 fade-scroll-bottom" style="padding-top: 100px !important; color: #B28E00;">This is a heading</h2>

      <p class="lead m-5 pb-5 pl-5 pr-5 fade-scroll-bottom" style="padding-bottom: 150px !important;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam lectus, cursus sit amet pretium at, pellentesque sed eros. Praesent gravida, libero et tempus commodo, diam leo ultricies nisi, vel eleifend massa enim vitae turpis. In hac habitasse platea dictumst. Nulla eu ante bibendum, efficitur dui nec, iaculis sapien. Nullam sollicitudin, massa eu auctor gravida, metus odio ullamcorper quam, vitae lobortis eros diam vitae ipsum. In vitae laoreet tortor. Maecenas facilisis, nisl sed tincidunt cursus, lacus turpis tincidunt justo, ut dignissim nisi nunc vel leo. Nullam aliquam lacinia porta. Vivamus fringilla odio sit amet leo fringilla blandit. Ut ullamcorper dui at dolor vestibulum malesuada. Fusce consequat auctor interdum. Donec interdum ullamcorper interdum.</p>
  </div>
  
</div>

<div class="container-fluid fade-scroll-bottom" style="background-color: #FF6F69;">
        
  <div class="container">
      <h2 class="display-3 text-center mb-5 pt-5 pb-3 fade-scroll-bottom" style="padding-top: 100px !important; color: #FF3D33;">This is a heading</h2>

      <p class="lead m-5 pb-5 pl-5 pr-5 fade-scroll-bottom" style="padding-bottom: 150px !important;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quam lectus, cursus sit amet pretium at, pellentesque sed eros. Praesent gravida, libero et tempus commodo, diam leo ultricies nisi, vel eleifend massa enim vitae turpis. In hac habitasse platea dictumst. Nulla eu ante bibendum, efficitur dui nec, iaculis sapien. Nullam sollicitudin, massa eu auctor gravida, metus odio ullamcorper quam, vitae lobortis eros diam vitae ipsum. In vitae laoreet tortor. Maecenas facilisis, nisl sed tincidunt cursus, lacus turpis tincidunt justo, ut dignissim nisi nunc vel leo. Nullam aliquam lacinia porta. Vivamus fringilla odio sit amet leo fringilla blandit. Ut ullamcorper dui at dolor vestibulum malesuada. Fusce consequat auctor interdum. Donec interdum ullamcorper interdum.</p>
  </div>
  
</div>

...

---

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