.create(data)

新しくbasicScrollインスタンスを生成します。

インスタンスには必ず変数を指定してください。 インスタンスを使用すると、以下の処理が可能です。

• アニメーションの開始と停止。
• インスタンスがアクティブかどうかを確認。
• 現在のプロパティの取得。
• ウィンドウサイズを変更した時に、プロパティの再計算。

インスタンスの生成例

const instance = basicScroll.create({
  from: '0',
  to: '100px',
  props: {
    '--opacity': {
      from: 0,
      to: 1
    }
  }
})

const instance = basicScroll.create({
  elem: document.querySelector('.element'),
  from: 'top-bottom',
  to: 'bottom-top',
  props: {
    '--translateY': {
      from: '0',
      to: '100%',
      timing: 'elasticOut'
    }
  }
})

const instance = basicScroll.create({
  elem: document.querySelector('.element'),
  from: 'top-middle',
  to: 'bottom-middle',
  inside: (instance, percentage, props) => {
    console.log('viewport is inside from and to')
  },
  outside: (instance, percentage, props) => {
    console.log('viewport is outside from and to')
  }
})

パラメータ

data: object

dataオブジェクト。

戻り値

object

生成したインスタンスを返します。

デモ

インスタンスを生成して、console.logを出力します。

JavaScript

const instance = basicScroll.create({
  from: '0',
  to: '100px',
  props: {
    '--opacity': {
      from: 0,
      to: 1
    }
  }
});
console.log(instance);