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() メソッドに渡すと、アニメーションの進行を制御するタイムラインとして指定します。

AnimationTimeline ScrollTimeline

コンストラクター

ScrollTimeline() Experimental

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

インスタンスプロパティ

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

source 読取専用 Experimental

スクロール位置がタイムラインの進行、つまりアニメーションを駆動するスクロール可能要素(スクローラー)への参照を返します。

axis 読取専用 Experimental

タイムラインの進行状況を表すスクロール軸を列挙した値を返します。

インスタンスメソッド

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

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

この例では、ビュー進行タイムラインに沿って classbox の要素をアニメーションしています。文書のスクロールに合わせて画面全体でアニメーションします。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 では、boxoutput<div> の参照を取得し、新しい ScrollTimeline を作成し、スクロールタイムラインを進行させる要素は文書 (<html>) 要素であり、スクロール軸は block 軸であることを指定します。そして、ウェブアニメーション API を使って box 要素をアニメーションします。最後に、ソース要素と軸を output 要素に表示します。

js
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}`;

結果

スクロールしてアニメーションするボックスをご覧ください。

仕様書

Specification
Scroll-driven Animations
# scrolltimeline-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ScrollTimeline
Experimental
ScrollTimeline() constructor
Experimental
axis
Experimental
source
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

関連情報