basicScroll - にほんご。

.create(data)

作成日: 2018-03-06

新しく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);

© 2018 Tobias Reich Released under the MIT license

このコンテンツはTobias Reich(electerious)によるbasicScrollドキュメントを翻訳/改変したものです。