このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
ScrollTimeline
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
ScrollTimeline はウェブアニメーション API のインターフェイスで、スクロール進行タイムラインを表します(詳しくは CSS スクロール駆動アニメーション を参照してください)。
ScrollTimeline インスタンスを Animation() コンストラクターまたは animate() メソッドに渡すと、アニメーションの進行を制御するタイムラインとして指定します。
コンストラクター
ScrollTimeline()-
新しい
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}`;
結果
スクロールしてアニメーションするボックスをご覧ください。
仕様書
| 仕様書 |
|---|
| Scroll-driven Animations # scrolltimeline-interface |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。