basicScroll - にほんご。

Data

更新日: 2018-11-08

dataオブジェクトには、以下のプロパティを指定することができます。

{
  /*
   * DOM Element/Node.
   */
  elem: null,
  /*
   * 開始＆停止位置
   */
  from: null,
  to: null,
  /*
   * ダイレクトモード
   */
  direct: false,
  /*
   * ウィンドウサイズ変更の検知
   */
  track: true,
  /*
   * コールバック関数
   */
  inside: (instance, percentage, props) => {},
  outside: (instance, percentage, props) => {},
  /*
   * Props.
   */
  props: {
    /*
     * プロパティ名、CSSカスタムプロパティ
     */
    '--name': {
      /*
       * 開始と終了の値
       */
      from: null,
      to: null,
      /*
       * アニメーションのイージング
       */
      timing: 'ease'
    }
  }
}

DOM Element/Node

type初期値オプション
booleanfalseこのプロパティはオプションです。

DOMまたはノードを指定します。

要素の位置とサイズは、開始位置と停止位置を絶対置に変換するために使用します。 相対置でアニメーションする場合に開始と停止の位置を取得するには、これしかありません。

絶対置を指定する場合は設定する必要はありません。

{
  elem: document.querySelector('.element')
  /* ... */
}

開始＆停止位置

type初期値オプション
integer, stringnullこのプロパティは必須です。

basicScrillは、 スクロール位置がfromより上で、toより下の時にpropsのアニメーションを開始します。 絶対置または、相対置を指定することができます。

相対置の場合、DOM Element/Nodeを指定する必要があります。 <element>-<viewport>の前半の値は、要素の位置を表します。 後半の値は、viewportの位置を表します。 fromにmiddle-bottomを指定した場合、 指定した要素の中央(middle)がviewportの下部(bottom)に達した時にアニメーションが開始します。

既定の相対値： top-top、top-middle、top-bottom、middle-top、middle-middle、middle-bottom、bottom-top、bottom-middle、bottom-bottom

{
  /* ... */
  from: '0px',
  to: '100px',
  /* ... */
}
{
  /* ... */
  from: 0,
  to: 360,
  /* ... */
}
{
  /* ... */
  from: 'top-middle',
  to: 'bottom-middle',
  /* ... */
}

ダイレクトモード

type初期値オプション
booleanfalseこのプロパティはオプションです。

basicScrollはデフォルトで全てのpropsをグローバルに適用します。 このプロパティを指定することで、 インスタンスが追跡している要素だけではなく、 CSSのどこでも変数を使うことができます。 directにtrueを指定した場合、 全てのスタイルを直接DOM Element/Nodeに適用します。 directにtrueを指定すると、 CSS変数だけではなく、CSSプロパティもアニメーションさせることができます。

<!-- direct: false -->
<html style="--name: 0;">
  <div class="element"></div>
</html>
<!-- direct: true -->
<html>
  <div class="element" style="--name: 0;"></div>
</html>

ウィンドウサイズ変更の検知

type初期値オプション
booleantrueこのプロパティはオプションです。

basicScrollは、ウィンドウサイズが変更されると、 自動で再計算し、インスタンスを更新します。 独自に処理したい場合は、各インスタンスの追跡を個別に無効化することができます。

メモ：basicScrollはウィンドウサイズのみを追跡します。 サイトのサイズを変更する場合は、インスタンスを手動で再計算する必要があります。 ページのレイアウトを変更する場合、インスタンスの更新をトリガーする必要があります。

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

// 追跡を無効にした場合、インスタンスを手動で再計算し、更新します。
// 本番では、不要な計算を会費するために、この関数をデバウンスします。
window.onresize = function() {

  instance.calculate()
  instance.update()

}

コールバック関数

type初期値オプション
function() => {}このプロパティはオプションです。

両方ともinstance(現在のインスタンス)、percentage(%)、props(計算済みのプロパティ)を受け取ります。

  • percentageが< 0% : スクロール位置はfromより下です。
  • percentageが= 0% : スクロール位置はfromです。
  • percentageが= 100% : スクロール位置はtoです。
  • percentageが> 100% : スクロール位置はfromより上です。
{
  /* ... */
  inside: (instance, percentage, props) => {},
  outside: (instance, percentage, props) => {},
  /* ... */
}

Props

type初期値オプション
object{}このプロパティはオプションです。

スクロール位置が変更された時にアニメーションする値。

オブジェクトの各propは、 CSSプロパティまたは、CSSカスタムプロパティ(CSS変数)を表します。 CSSカスタムプロパティは常に--(2つのダッシュ)で始まります。 --nameというpropは、CSSではvar(--name)でアクセスすることができます。

詳細は、CSSカスタムプロパティを参照してください。

{
  /* ... */
  props: {
    '--one-variable': { /* ... */ },
    '--another-variable': { /* ... */ }
  }
}

開始と終了の値

type初期値オプション
integer, stringnullこのプロパティは必須です。

全種類の単位で動作します。 fromに単位が指定されていない場合、 toの単位を使います。

'--name': {
  /* ... */
  from: '0',
  to: '100px',
  /* ... */
}
'--name': {
  /* ... */
  from: '50%',
  to: '100%',
  /* ... */
}
'--name': {
  /* ... */
  from: '0',
  to: '1turn',
  /* ... */
}

アニメーションのイージング

type初期値オプション
string, functionlinearこのプロパティはオプションです。

既定のイージングまたは、カスタム関数を指定します。 イージング関数は引数として、 0から1(アニメーションがどの程度完了したかを示すパーセンテージ)の間の値を受け取ります。 イージング関数は0から1の範囲の値を返すべきですが、 タイミングによっては0未満や、1以上でも構いません。

既定のイージング： backInOut、backIn、backOut、 bounceInOut、bounceIn、bounceOut、 circInOut、circIn、circOut、 cubicInOut、cubicIn、cubicOut、 elasticInOut、elasticIn、elasticOut、 expoInOut、expoIn、expoOut、 linear、 quadInOut、quadIn、quadOut、 quartInOut、quartIn、quartOut、 quintInOut、quintIn、quintOut、 sineInOut、sineIn、sineOut

'--name': {
  /* ... */
  timing: 'circInOut'
}
'--name': {
  /* ... */
  timing: (t) => t * t
}


© 2018 Tobias Reich Released under the MIT license

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