.start()

インスタンスのアニメーションを開始します。 basicScrollはスクロール位置を追跡し、 それに応じてpropsを調整します。propsは、 スクロール位置が変更された場合にのみ更新されます。

instance.start()

デモ

スクロール位置に応じて、透明度を変更します。

JavaScript

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

CSS

.element {
  width: 100px;
  height: 100px;
  background-color: #000;

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

HTML

<div class="element"></div>