Fades Elements In/Out of View on Page Scroll | ScrollFade.js

fade-in-and-out-on-scroll-css

ScrollFade is used to hide items in and out of view while scrolling through the page. Mark any elements you want to fade using the class scrollFade and add the following CSS and JS themes to your website.

Must Read: jQuery Plugin Fades Into Elements On Scroll Down | FadeInScroll

How to make use of it:

1. Add scrollfade.js to the web page.

<script src="assets/js/scrollfade.js"></script>

2. The essential CSS styles for the fade-in/out animations.

.scrollFade {
  opacity: 1;
  pointer-events: all;
}

.scrollFade--hidden {
  opacity: 0;
  pointer-events: none;
}

.scrollFade--visible {
  opacity: 1;
  pointer-events: all;
}

.scrollFade--animate {
  transition: opacity 0.4s ease-in-out;
}

3. Add the ‘scrollFade’ CSS class.

<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
<div class="item scrollFade"></div>
...

See Demo And Download

Official Website(meddlenz): Click Here

This superior jQuery/javascript plugin is developed by meddlenz. For extra Advanced Usage, please go to the official website.