Fade Elements In Sequence When Scrolling Down – scrollShow.js

Preview:

Description:

scrollShow.js is a JavaScript library that applies a fade-in animation to elements when they’re scrolled into view.

How to use it:

1. Load the JavaScript scrollShow.js and Stylesheet scrollShow.css in the document.

<link rel="stylesheet" href="scrollShow.css" />
<script src="scrollShow.js"></script>

2. Add the CSS class to the target element.

<div class="scrollShow">
  Item 1
</div>
<div class="scrollShow">
  Item 2
</div>
<div class="scrollShow">
  Item 3
</div>
...

3. Initialize the scrollShow.js and then the library adds the active class ‘show’ to the elements which are visible within the viewport.

scrollShow.addItems();

4. You can override the name of the active class.

<div class="scrollShow" data-scroll-show-class="active">
  Item 1
</div>

5. Determine in which position (%) the elements are considered ‘in view’.

<div class="scrollShow" data-scroll-show-element-percent="100" data-scroll-show-viewport-percent="0">
  Item 1
</div>