スクロールをトリガーにしたアニメーションを scroll-driven animations を使って構築する。このページでは CSS だけを使って実現する。
Scroll Progress Timeline は新しいCSSのプロパティだ。ページのスクロール進捗に合わせて連動するアニメーションの実装ができる。表示画面を対象にして、スクロールの開始位置を0%、最下部を100%として、上から下へスクロールの進捗をカウントする。まずは Scroll Progress Timeline のサンプルを見てみよう。
さて、最初に CSS アニメーションについての整理が必要だと思うので以下にまとめる。
animation-name: Jump, MoveRight, FadeInOut;
animation-duration: 3.5s, 4s, 1s;
animation-iteration-count: 2, 1, 5;
transition: background-color .3s, transform .6s, color 500ms;
animationプロパティは CSS の一括指定プロパティであり、以下の 8 つのCSS プロパティを一括で指定することができる。各プロパティの値を半角スペースで区切って指定する。(※値は初期値)
一括指定する際の各値の順番は無いが、例外的なのが秒数を指定するプロパティがふたつある。animation-duration が先に、animation-delay を後に記述する。
8 つの CSSプロパティの内、記述していないものは初期値が参照される。
View Progress Timeline は新しいCSSのプロパティだ。ページの特定する要素に差し掛かると、その特定する範囲でのスクロール進捗に合わせて連動するアニメーションの実装ができる。特定する要素を対象にして、スクロールの開始位置を0%、最下部を100%として、上から下へスクロールの進捗をカウントする。まずは View Progress Timeline のサンプルを見てみよう。
View Progress Timelineの基本的な使い方は、アニメーションさせたい要素の animation-timeline に view() 関数を使い、animation-range でアニメーションが作動する対象の範囲を決め、animation に @keyframes を指定する。
<main>
<div class="interval"></p></div>
<div class="object"></div>
<div class="interval-2"></div>
<div class="interval-3"></div>
</main>
main {
width: 40ch;
width: 100%;
margin: auto;
padding: 0;
background-color: #f7f7f7;
box-shadow: 0px 3px 6px 0px #9E9E9E;
}
@keyframes expand-collapse {
0% {width:0%;}
25% {width:100%;}
75% {width:100%;}
100% {width:0%;}
}
.object {
height: .5rem;
width: 0%;
background-color: #fe001a;
view-timeline-axis: y; /* 以下にて 説明 ※ 1 */
animation: auto linear both; /* 以下にて 説明 ※ 2 */
animation-name: expand-collapse;
view-timeline-name: --expand-object; /* 説明 ※ 3 */
animation-timeline: --expand-object; /* 説明 ※ 4 */
animation-duration: 1ms;
}
※ 1 CSS の 「view-timeline-axis: y」 は、y 軸方向のスクロールを基準にするという意味だ。
※ 2「animation: auto linear both;」の意味は、「auto:」でアニメーションが自動的に実行され、「linear:」で一定の速度で始まって終わり、「both:」でアニメーション再生前の要素のスタイルは最初のキーフレームの状態になる。
※ 3 「view-timeline-name」 は、view progress timeline に名前を付けるものだ。view-timeline-name に許可される値は「none」と「<dashed-ident>」(値は -- で始まる必要がある。
これは、標準の CSS キーワードとの名前の衝突を避けるのに役立つ。)、次の animation-timeline でその名前を使用することができる。
※ 4 「animation-timeline は、アニメーションを識別する名前だ。識別子は、大文字小文字の区別がない英文字 a から z、数字 0 から 9、アンダースコア ( _ )、ダッシュ ( - ) から成る。最初のダッシュ以外の文字は英文字でなければならない。
Scroll Progress Timeline と View Progress Timeline は、animation-range と組み合わせることで、スクロール連動型アニメーションの進行度を詳細に指定することができる。以下はその値についての説明である。
言葉では解り辛いのでanimation-range の値別挙動を見てみよう。
animation-range プロパティの各値での挙動は、scroll-driven-animations ジェネレーター でも確かめることができる。
animation-timeline: view(); を使ったページに animation-range: の値を変更して比較してみる。以下では画像表示のはじまりのタイミングが異なる設定を確認する。
対応ブラウザは Chrome と Edge に対応しているが Firefox には未対応なので、以下の対応が必要である。日本語では「このブラウザでは、スクロール駆動のアニメーションはサポートされていません。 Chrome もしくは Edge で試してください。」という具合に、「Warning」を表示する。
html は <body> 直下に、css を以下のように記述する。
<div class="warning">
<p> Scroll-driven animations are not supported in this browser. Try this page in Chrome 115+.</p>
</div>
/* Warning for unsupported browsers */
.warning {
color: black;
background: papayawhip;
margin-inline: -1rem;
padding: 1rem;
}
@supports (animation-timeline: scroll()) {
.warning {
display: none;
}
}
/* //Warning for unsupported browsers */
スクロールと連動するスクラブアニメーション(スクロール量や位置に応じてアニメーションを変化させる動き)の実装を行うには、以下ふたつの方法がある。
①@keyframesルールでアニメーションを用意し、アニメーションさせる要素に指定する。
②animation-timelineプロパティに scroll() 関数を指定する。
③animation-rangeプロパティを設定する。
①@keyframesルールでアニメーションを用意し、アニメーションさせる要素に指定する。
②animation-timelineプロパティに view() 関数を指定する。
③animation-rangeプロパティを設定する。
締めくくりとして、冒頭に掲げた「scroll-driven animations」の実用的なトリックの完成形を提示する。
avif は画像を超圧縮できる次世代型画像ファイル形式である。avif を対応のブラウザも非対応のブラウザも解決するための手法が picture 要素である。picture 要素は HTML5 から新たに追加された要素であり、ユーザーの閲覧環境に応じて最適な画像を表示させることができる。
Squoosh(スクーシュ)は、Googleが開発した画像圧縮ツール、webp や jpeg、png などの画像形式に変換したり、リサイズすることができる。Squooshは、2018年に公開。