スクロールドリブン アニメーションは、ウェブ上で一般的な UX パターンです。スクロールドリブン アニメーションは、スクロール コンテナのスクロール位置にリンクされます。つまり、上下にスクロールすると、リンクされたアニメーションがダイレクト レスポンスで前方または後方にスクラブされます。たとえば、視差効果のある背景画像や、スクロールに応じて移動する読み取りインジケーターなどの効果があります。
デベロッパーは通常、JavaScript を使用してメインスレッドのスクロール イベントに応答することで、スクロールドリブン アニメーションを作成しています。このため、スクロール イベントは非同期で配信されるため、スクロールと同期した高パフォーマンスなスクロールドリブン アニメーションを作成することが難しくなり、メインスレッドに存在するために頻繁にジャンクが発生します。
ただし、ブラウザに組み込まれる CSS と UI の新機能の一環として、宣言型のスクロールドリブン アニメーションを作成できるようになりました。既存の Web Animations API(WAAPI)と CSS Animations API と統合される新しいコンセプトである Scroll Timeline と View Timeline により、わずか数行のコードで、メインスレッドから滑らかなスクロールドリブン アニメーションを実行できます。このケーススタディでは、Tokopedia、redBus、Policybazaar がこの新機能をどのように活用しているかを確認します。
Tokopedia
Tokopedia は、以前の JavaScript のカスタム実装をスクロールドリブン アニメーションに置き換えて、ページのパフォーマンスを最適化し、e コマースのコンバージョン プロセス全体で全体的なブラウジング エクスペリエンスを向上させました。
従来の JavaScript スクロール イベントを使用した場合と比較して、コード行数を最大 80% 削減することができ、スクロール中の平均 CPU 使用率が 50% から 2% に減少しました - Tokopedia、シニア ソフトウェア エンジニア、Andy Wihalim
コード
次の実装では、scroll()
関数を使用して匿名のスクロール進行状況タイムラインを設定し、CSS アニメーションの進行状況を制御します。上部の固定バーの表示は、定義された animationRange
内のスクロール位置に応じて変わります。
const toggleBar = keyframes({
to: { height: 48 },
});
export const cssWrapper = css({
position: 'fixed',
left: 0,
width: '100vw',
pointerEvents: 'none',
marginTop: 120,
height: 0,
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
animation: `${toggleBar} linear both`,
animationTimeline: 'scroll()',
animationRange: '20px 70px',
});
redBus
redBus のおすすめスポットのランディング ページでは、モバイルとパソコンで異なるアニメーションを使用しています。このページは、コンバージョン プロセスの早い段階ですべてのユーザーに表示されます。スクロールドリブン アニメーションでは、このようなカスタムの JavaScript 実装を CSS に置き換えて、同じ効果を実現することができました。
ユースケース
画像表示(モバイルの場合)とカバーフロー(パソコンの場合)を備えたフォト ギャラリー。
コード(モバイル)
上記の例では、Tokopedia は匿名のスクロール進行状況タイムラインを使用しました。次のコードでは、redBus は名前付きビューの進行状況タイムラインを使用します。このアニメーションは、要素に最も近い祖先スクローラー(この場合はフォト ギャラリーのスクローラー)内の定義された animation-range
内の <img>
要素の opacity
と clip-path
を変更します。
const reveal = keyframes`
from {
opacity: 0;
clip-path: inset(45% 20% 45% 20%);
}
to {
opacity: 1;
clip-path: inset(0% 0% 0% 0%);
}`
const CardImage = styled.div`
width: 100%;
height: 100%;
img {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
height: 100%;
width: 100%;
object-fit: cover;
view-timeline-name: --revealing-image;
view-timeline-axis: block;
/* Attach animation, linked to the View Timeline */
animation: linear ${reveal} both;
animation-timeline: --revealing-image;
/* Tweak range when effect should run*/
animation-range: entry 25% cover 50%;
}
`;
この機能がパフォーマンスとエクスペリエンスの向上を完璧に融合し、SEO のためのページ エクスペリエンス シグナルを強化してくれることをうれしく思います。しかも、習得に手間が最小限に抑えられているため、すべての e コマース ウェブサイトでなくてはならないものです。また、ユーザー ジャーニーをさらに拡大するために SDA を活用する方法について、他のチームからも好意的なフィードバックとサポートをいただきました( redBus、シニア エンジニアリング マネージャー、Amit Kumar)。
ポリシーバザール
保険プランの比較は、ユーザーが意思決定プロセスを導くために繰り返し行う重要なアクションです。Policybazaar は、スクロールドリブン アニメーションを使用して、ユーザーがテーブルをスクロールするのに応じて、優先度の低い要素のサイズを縮小しました。これにより、可読性を高めながら、グレースフルなスクロールが可能になりました。
スクロールドリブン アニメーションを使用することで、ユーザーがプランを比較するためのビューポートを最大化し、集中した読みやすいエクスペリエンスを実現できました。(PolicyBazaar、生命保険 BU デザイン責任者 Rishabh Mehrotra)
コード
Tokopedia の前の例と同様に、Policybazaar は scroll()
関数を使用して匿名のスクロール進行状況タイムラインを設定し、CSS アニメーションの進行状況を制御します。この場合は、定義された animation-range
内のスクロール位置に基づいて、フォントサイズが縮小され、ヘッダーがフェードします。
@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}
@keyframes move-and-fade-header {
to {
translate: 0% -5%;
top:103px;
}
}
@keyframes shrink-name {
to {
font-size: 1.5rem;
}
}
ユーザー ジャーニー全体で一般的なパターンとしてのスクロールドリブン アニメーション
注目の e コマース企業はすべて、カードが配置されたページでスクロールドリブン アニメーションを使用し、カードをアニメーション化してユーザーの注目を集めています。次の例は、ユーザー ジャーニーのさまざまな段階でカードのスクロール効果を示しています。通常、次の CSS スニペットに示すように、カスタム CSS アニメーションの進行状況を制御する匿名ビュー進行状況タイムラインを使用します。
@keyframes animate-in {
0% { opacity: 0; transform: translateY(10%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10%); }
}
.flyin_animate {
animation: animate-in linear forwards;
animation-timeline: view();
animation-range: entry;
}
redBus(ホームページ)
Policybazaar(商品リスティング ページ)
Tokopedia(商品の詳細ページ)
Scroll-Drive Animations API を使用する際の考慮事項
スクロール タイムラインのポリフィルなどを使用すると、非対応のブラウザでもスクロールドリブン アニメーションをポリフィルできます。その場合、追加のテストを行い、フレームワークと適切に連携して動作することと、ポリフィルを使用するブラウザでアニメーションの失敗やジャンクが発生することがないことを確認します。
スクロールドリブン アニメーションを使用する前に、CSS から @supports
を使用してアニメーション タイムラインのサポートをテストできます。次に例を示します。
@supports (animation-timeline: scroll()) {
}
リソース
- スクロールドリブン アニメーションのデモ
- スクロールドリブン アニメーションでスクロール時に要素をアニメーション化する
- Codelab: CSS でスクロールドリブン アニメーションを使ってみる
- Chrome 拡張機能: スクロールドリブン アニメーション デバッガ
- スクロール タイムラインのポリフィル
- バグや新機能を報告しますか?ご意見をお聞かせください。
ビュー遷移、ポップオーバー、コンテナクエリ、has()
セレクタなどの新しい CSS や UI 機能を使用することで e コマース企業がどのようにメリットを得たかについて説明しているこのシリーズの他の記事もご覧ください。