滚动条动画

使用到的js库

jquery.js
ScrollMagic.js 
gsap.js

页面引入js

使用动画

 

转换滚动数据的函数调用说明：

 函数：

function handleProgress({ start, end, progress, portions = 100, progressCallback, initStart, initEnd }) {
    if (progress < start) {
      initStart && initStart()
    }
    if (progress > end) {
      initEnd && initEnd()
    }
    // 区间内触发
    if (progress >= start && progress <= end) {
      // 把起点变成0
      let progressNum = progress - start;
      // 滚动区间距离值
      let interval = end - start;
      progressCallback && progressCallback(progressNum / (interval / portions))
    }
  }

 

调用函数：