オブジェクトが可視範囲にきたらアニメーションを発火して、スクロール量に応じたアニメーションを実行する。


const anim = (target, value) => {

  TweenMax.to(target, .5, {

    y: value,

  });

};


class scrollPosition {

  constructor(targets, callbackIn) {

    this.targets = [...document.querySelectorAll(targets)];
    this.windowH = window.innerHeight;
    this.scrollY = 0;
    this.offsetTop = [];
    this.height = [];
    this.show = [];
    this.value = [];
    this.offset = 100;

    this.callbackIn = typeof callbackIn === 'function' ? callbackIn : () => {};

    this.getItem();
    this.init();

    return this;

  }


  init() {

    window.addEventListener('scroll', () => {

      this.scrollY = window.pageYOffset;
      this.check();

    });

    this.check();

  }

  getItem() {

    this.targets.forEach((el, i) => {

      let rect = el.getBoundingClientRect();

      this.offsetTop[i] = rect.top;
      this.height[i] = el.offsetHeight;

    });

  }

  check() {

    this.targets.forEach((el, i) => {

      this.show[i] = (this.scrollY + this.windowH > this.offsetTop[i] + this.offset) && (this.scrollY < this.offsetTop[i] - this.offset + this.height[i]);
      this.value[i] = this.scrollY + this.windowH - this.offsetTop[i] - this.offset;

      if (this.show[i]) {

        el.classList.add('is-show');
        this.callbackIn.call(this, el, i);

      } else {

        el.classList.remove('is-show');

      }

    });

  }

}

const box = new scrollPosition('.box', function(el, i) {

  let amount = 100;
  let value = this.value[i] / this.windowH * amount * -1;

  if (this.show[i]) {

    anim(el.querySelector('.inner'), value);

  }

});

labs

マウスに追従して歪めるパララックス演出 -『parallax』

分割した背景をマウスに追従してずらすパララックス演出 -『parallax』

可視範囲を判定してアニメーションを実行するクラス &#8211; 『TweenMax』

スクロールのイージングとパララックス効果 &#8211; 『TweenMax』

可視範囲を判定してアニメーションを実行するクラス – 『TweenMax』

スクロールのイージングとパララックス効果 – 『TweenMax』