.calculate()

インスタンスの開始位置と停止位置を絶対位置に変換します。 basicScrollは、それらの値を使用して、 正しい位置でアニメーションを開始＆停止させます。 .calculate()はインスタンス生成時に位置を計算します。 要素の位置が変更されたり、 サイトやviewportのサイズが変更された時には、 .calculate()を呼び出す必要があります。

instance.calculate()

デモ

「下に移動」ボタンまたは「上に移動」ボタンで要素の位置を変更し、 「位置を再計算」ボタンを押した後にスクロールすると、 再計算した位置を元に、透明度が更新されます。
透明度は、要素の上部がページ内の上部になるにつれて薄くなり、 要素の下部がページ内の下部に近づくにつれて濃くなります。

JavaScript

const instance = basicScroll.create({
  elem: document.getElementById('element'),
  from: 'top-top',
  to: 'bottom-bottom',
  props: {
    '--opacity': {
      from: 0,
      to: 1
    }
  }
});
instance.start();

document.querySelector('.up').addEventListener('click', function () {
  let posiTop = parseInt(document.getElementById('element').style.top, 10);
  posiTop -= 40;
  document.getElementById('element').style.top = posiTop + 'px';
});
document.querySelector('.down').addEventListener('click', function () {
  let posiTop = parseInt(document.getElementById('element').style.top, 10);
  posiTop += 40;
  document.getElementById('element').style.top = posiTop + 'px';
});
document.querySelector('.calculate').addEventListener('click', function () {
  instance.calculate();
});

CSS

#element {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 60px 0;

  opacity: var(--opacity);
  will-change: opacity;
}

HTML

<button class="down">下に移動</button>
<button class="up">上に移動</button>
<button class="calculate">位置を再計算</button>
<div id="element" style="top:0px;"></div>