Skip to content
This repository has been archived by the owner on Mar 2, 2020. It is now read-only.

Synchronize opacity with scroll position on multiple elements.

Notifications You must be signed in to change notification settings

WebPraktikos/fade-on-scroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 

Repository files navigation

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.

About

Synchronize opacity with scroll position on multiple elements.

Resources

Stars

Watchers

Forks

Packages

No packages published