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()
Experimental-
新しい
ScrollTimeline
オブジェクトのインスタンスを作成します。
インスタンスプロパティ
このインターフェイスには、親である AnimationTimeline
から継承したプロパティもあります。
インスタンスメソッド
このインターフェイスには、親である AnimationTimeline
から継承したメソッドもあります。
例
スクロール進行タイムラインのソースと軸の表示
この例では、ビュー進行タイムラインに沿って class
が box
の要素をアニメーションしています。文書のスクロールに合わせて画面全体でアニメーションします。source
要素とスクロール axis
を右上の output
要素に出力します。
HTML
例の HTML は下記に示します。
<div class="content"></div>
<div class="box"></div>
<div class="output"></div>
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}`;
結果
スクロールしてアニメーションするボックスをご覧ください。
仕様書
Specification |
---|
Scroll-driven Animations # scrolltimeline-interface |
ブラウザーの互換性
BCD tables only load in the browser