Fade In/Out Elements On Scroll – ScrollFade.js

Category: Animation , Javascript | August 12, 2021
Author:meddlenz
Views Total:337 views
Official Page:Go to website
Last Update:August 12, 2021
License:MIT

Preview:

Fade In/Out Elements On Scroll – ScrollFade.js

Description:

ScrollFade.js is a JavaScript library for fading in/out elements as they’re scrolled into and out of the viewport.

How to use it:

1. Add the scrollfade.js to the page.

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

2. The necessary 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 to the target elements and done.

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

You Might Be Interested In:


Leave a Reply