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

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.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.