ScrollTimeline

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

ScrollTimeline はウェブアニメーション API のインターフェイスで、スクロール進行タイムラインを表します（詳しくは CSS スクロール駆動アニメーションを参照してください）。

ScrollTimeline インスタンスを Animation() コンストラクターまたは animate() メソッドに渡すと、アニメーションの進行を制御するタイムラインとして指定します。

コンストラクター

ScrollTimeline(): 新しい ScrollTimeline オブジェクトのインスタンスを作成します。

インスタンスプロパティ

このインターフェイスには、親である AnimationTimeline から継承したプロパティもあります。

source 読取専用: スクロール位置がタイムラインの進行、つまりアニメーションを駆動するスクロール可能要素（スクローラー）への参照を返します。
axis 読取専用: タイムラインの進行状況を表すスクロール軸を列挙した値を返します。

インスタンスメソッド

このインターフェイスには、親である AnimationTimeline から継承したメソッドもあります。

例

スクロール進行タイムラインのソースと軸の表示

この例では、ビュー進行タイムラインに沿って class が box の要素をアニメーションしています。文書のスクロールに合わせて画面全体でアニメーションします。source 要素とスクロール axis を右上の output 要素に出力します。

HTML

例の HTML は下記に示します。

html

<div class="content"></div>
<div class="box"></div>
<div class="output"></div>

CSS

例の CSS はこのようになっています。

css

.content {
  height: 2000px;
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: rebeccapurple;
  position: fixed;
  top: 20px;
  left: 0%;
}

.output {
  font-family: Arial, Helvetica, sans-serif;
  position: fixed;
  top: 5px;
  right: 5px;
}

JavaScript

JavaScript では、box と output の <div> の参照を取得し、新しい ScrollTimeline を作成し、スクロールタイムラインを進行させる要素は文書 (<html>) 要素であり、スクロール軸は block 軸であることを指定します。そして、ウェブアニメーション API を使って box 要素をアニメーションします。最後に、ソース要素と軸を output 要素に表示します。

const box = document.querySelector(".box");
const output = document.querySelector(".output");

const timeline = new ScrollTimeline({
  source: document.documentElement,
  axis: "block",
});

box.animate(
  {
    rotate: ["0deg", "720deg"],
    left: ["0%", "100%"],
  },
  {
    timeline,
  },
);

output.textContent = `Timeline source element: ${timeline.source.nodeName}. Timeline scroll axis: ${timeline.axis}`;