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

File Size:2.09 KB
Views Total:520
Last Update:April 5, 2018
Publish Date:December 2, 2017
Official Website:Go to website
License:MIT

fade-scroll.js is an extremely lightweight jQuery plugin for use when you scoll on web page then active secton fade in effect on your screen. fade in-out effect apply all sections. an active section each section fade in and not active are fade out on scroll, 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

<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: #FF"> <a href="http://www.jqueryshare.net/">3D</a> 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>

Done 🙂