ScrollWiz

Allows you to add .is-active class into elements when they are in the viewport on scroll.

Installation

ScrollWiz lives in npm. To install the latest stable version, run the following command:

npm install scrollwiz

Usage

Javascript

import ScrollWiz from "scrollwiz";

ScrollWiz();

HTML

<div class="box box--blue" data-scrollwiz="start">box 1</div>
<div class="box box--red" data-scrollwiz="half">box 2</div>
<div class="box box--yellow" data-scrollwiz="full">box 3</div>

SCSS

.box {
  height: 700px;
  transition: opacity 1s linear;
  opacity: 0;
  &--blue {
    background-color: blue;
  }
  &--red {
    background-color: red;
  }
  &--yellow {
    background-color: yellow;
  }
  &.is-active {
    opacity: 1;
  }
}

data-scrollwiz="start" adds .is-active when the element just gets into the viewport on scroll

data-scrollwiz="half" adds .is-active when the half of the element gets into the viewport on scroll

data-scrollwiz="full" adds .is-active when all of the element gets into the viewport on scroll

License

ScrollWiz is MIT licensed.