言いたいことと別のことを言ってしまい、必要な場面で別のものを使ってしまった。将来の自分に向けて、スクロール駆動アニメーション、スクロールトリガーアニメーション、コンテナクエリによるスクロール状態、ビュートランジションの主な類似点と相違点を整理しておきます。
スクロール駆動アニメーションは、スクロールに直接反応するアニメーションです。具体的には、スクロールの進行度とアニメーションの進行度が直接連動します。スクロールを進めるとアニメーションも進み、スクロールを戻すとアニメーションも逆再生します。スクロールを止めると、アニメーションも止まります。
.element {
animation: grow-progress linear forwards;
animation-timeline: scroll();
}
スクロールトリガーアニメーションは、スクロール時に実行され、アニメーション全体が一度に再生されます。つまり、ここではスクロールの進行度と直接連動しません。要素が定義された閾値 — トリガー有効範囲 と呼ばれる — を超えると、アニメーションが実行されます。たとえば、その要素がスクロールポートに出入りしたときなどです。
これは CSS Conditional Rules Module Level 5 仕様のワーキングドラフトに含まれています。仕様では次のように定義されています:
[…] スクロール位置に依存する状態をコンテナに対してクエリできるようにする。
これが私の頭を悩ませる理由です。スクロール駆動アニメーションに似ていて、スクロールトリガーアニメーションにも似ていますが、コンテナが何らかのスクロール条件に達したときにスタイルを更新します。例えば:
.sticky-nav {
container-type: scroll-state;
position: sticky;
top: 0;
@container scroll-state(stuck: top) {
background: orangered;
border-radius: 0;
flex-direction: row;
width: 100%;
a {
text-decoration: none;
}
}
}
ビュートランジション
これはスクロールとは一切関係ありません。また view() とも関係ありません。実際には、CSS と JavaScript の相互連動する機能群からなる完全な API で、2つのことを実現できます:
同一ドキュメント内トランジション
ユーザー操作に応じて、要素が一つの状態から別の状態に変化します。Modern Web Weekly で紹介されていた、ラジオボタンのチェック状態が別の入力へ移動するアニメーションに本当に魅力を感じました。
基本的に、状態変化は開始したページ内で起こります。Bramus はビュートランジションの第一人者で、Chrome チームによるこのコレクションには美しい例がたくさん掲載されています。
クロスドキュメントトランジション
あるページから次のページへアニメーションで遷移します。デフォルトの使い方は、ページ A からページ B へ(およびその逆)のクロスフェードで、実装はとても簡単です。もちろん、それ以上に複雑なことも可能です。Sunkanmi は最近、いくつかのレシピを共有しました。例えば、最初のページを円形の clip-path で消し去り、2ページ目を表示するような巧みな例です。
以上です!
このように整理すると頭の中が整理されます。
| 種類 | できること |
|---|---|
| スクロール駆動アニメーション | スクロールを進めるとアニメーションも進み、スクロールを戻すとアニメーションも逆再生します。スクロールを止めると、アニメーションも止まります。 |
| スクロールトリガーアニメーション | 要素が定義された閾値 — トリガー有効範囲 と呼ばれる — を超えると、アニメーションが実行されます。 |
| コンテナクエリによるスクロール状態 | コンテナが何らかのスクロール条件に達したときにスタイルを更新します。 |
| ビュートランジション | 同一ドキュメント内トランジション(ページ上の要素が一つの状態から別の状態に変化する)とクロスドキュメントトランジション(あるページから次のページへ遷移し、その逆も可能)の API。 |
0 Comments
Log in to join the conversation.No comments yet. Be the first to share your thoughts.