ScrollCheck

Demo: https://codepen.io/ss830119/pen/rNaGWZd?editors=0010

Getting Started

<script src="https://zxccxz0119.github.io/assets/scrollCheck.js"></script>

Usage

<div class="section">
  <p> A </p>
</div>
<div class="section">
  <p> B </p>
</div>
<div class="section">
  <p> C </p>
</div>
<div class="section">
  <p> D </p>
</div>

var page = new scrollCheck({
  classname: 'section', // object classname
  repeat: true // scroll animation repeat or once
})
page.init() // init after all setting and feature

use class active to add animation

.section {
  height: 100vh;
  background: #ccc;
  border-bottom: 1px solid #aaa;
  transition-duration: 1s;
}
.section.active {
  background: #666;
  color: #fff;
  transition-duration: 1s;
}

feature

setPoint

setPoint() set before init()

scrollCheck.setPoint({
  id: 'totop', // element
  stay: 1,  // 'active' class appear which interval
  repeat: true  // scroll animation repeat or once, default is 'false'
  range: 2 // toggle 'active' range
})