fade-on-scroll

Minimal library for synced fade on scroll on multiple elements.

• It uses one scroll event listener for all instances.
• It's dependency-free — no JQuery.
• Options can be set in JavaScript html element.
• It uses requestAnimationFrame with polyfill.

Demo: Codepen

Purpose of Existence

The only solutions that I've found at the time were huge multipurpose libraries or too limiting scripts.

Usage

1. Include it in a HTML document.

<script src="/path/to/fade-on-scroll.js"></script>

2. Initiate by passing the container selector as a function argument.

var someIdentifier = FadeOnScroll( 'window' );

3. Specify which element/s to manipulate and how.

a. Inside JavaScript (or refer to b. for html option).

Single element.

var services = someIdentifier( '.promo-boxes__prgf', {
  waypoint: '33%',
  direction: 'bottom'
})

Multiple elements.

var services = someIdentifier([
  [
    '.promo-boxes__prgf',
      {
        waypoint: '33%',
        direction: 'bottom'
      }
  ], [
    '.main-header',
    {
      waypoint: 'self',
      direction: 'top'
    }
  ]
])

b. Inside HTML. Special class name fade-on-scroll has to be used.

<header class="main-header fade-on-scroll" data-fos-options='{ "waypoint": "self", "direction": "top" }'>

Attention: Options set in the HTML must be valid JSON. Keys need to be quoted, for example "itemSelector":. Attribute data-fos-options is set with a single quote ', but JSON entities use double-quotes ".

Options

• direction - To which direction to fade-in or fade-out.
  • top - Fade-out (into window top) when scrolling down.
  • bottom - Fade-in (from window bottom) when scrolling down.
  • both - Fade-out (into window top) and fade-in (from window bottom) when scrolling down.
• waypoint - From which distance to fade-in or fade-out, relative to the direction option (top, bottom or both).
  • self - Top or bottom position of an element.
  • in px - Distance in pixels (e.g. 60px).
  • in % - Distance in percentage (e.g. 30%).

Licence

The MIT License (MIT)

© 2017 WebPraktikos [email protected] @webpraktikos.