Usage

このデモでは、ユーザーがスクロールした時に、 要素のopacityを変更する方法を紹介します。 要素の上部がviewportの最下部に達すると、要素がフェードし始めます。 要素の中央がviewportの中央にある時、opacityが.99になります。

.01から.99にアニメーションすると、 要素が透明から半透明に変化したり、半透明から完全に可視化される時に発生する、要素の再描画は起こりません。

const instance = basicScroll.create({
  elem: document.querySelector('.element'),
  from: 'top-bottom',
  to: 'middle-middle',
  props: {
    '--opacity': {
      from: .01,
      to: .99
    }
  }
})

instance.start()

.element {
  /*
   * インスタンスで指定したものと同じCSS変数を使います。
   */
  opacity: var(--opacity);
  /*
   * 'will-change'プロパティは、
   * ブラウザに対して期待する変更の種類を知らせます。
   * これは、実際に要素が変更される前に、
   * 事前にブラウザが適切な最適化を設定するために使用します。
   */
  will-change: opacity;
}

デモ

スクロールで要素を画面の中央に近づけるにつれて、透明度を濃くします。

JavaScript

createObj = function() {
  const instance = basicScroll.create({
    elem: document.querySelector('.element'),
    from: 'top-bottom',
    to: 'middle-middle',
    props: {
      '--opacity': {
        from: .01,
        to: .99
      }
    }
  })

  instance.start()
}

CSS

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

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

HTML

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