ScrollOut

ScrollOut is a small, lightweight JS library for scroll-triggered events, such as reveal and parallax.

CDN:

<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>

Init

<script>
  ScrollOut();
</script>

HTML

<section data-scroll="out">
    <h1>Section</h1>
    <p>Lorem ipsum et dolorem.</p>
</section>

CSS:

[data-scroll] {
  transition: opacity 1s;
}
[data-scroll="in"] {
  opacity: 1;
}
[data-scroll="out"] {
  opacity: 0;
}

Example:

See the Pen Reveal on Scroll Test – w/ ScrollOut2 by kccnma (@kccnma) on CodePen.