jQuery Plugin To Fade In / Out Elements On Scroll - Scroll Fade

jQuery Plugin To Fade In / Out Elements On Scroll - Scroll Fade
File Size: 7.32 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Scroll Fade is an extremely lightweight jQuery plugin that provides two methods to fade in and fade out html elements at a specified scroll position on vertical page scrolling.

How to use it:

1. To use this plugin, just load the scrollFade.min.js script after jQuery JavaScript library and we're ready to go.

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

2. Apply a fade in effect to your element when it is scrolled into view.

$('#el').scrollFadeIn();

3. Apply a fade out effect to your element when it is scrolled out of view.

$('#el').scrollFadeOut();

4. Parameters.

  • offset: if you scroll the number of pixels set in it, the element will be faded in or out
  • start: tells when the fading should start
// $('#el').scrollFadeOut(offset, start);
// $('#el').scrollFadeIn(offset, start);
$('#el').scrollFadeOut(500);
$('#el').scrollFadeIn(500, 500);

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