このページは Cloud Translation API によって翻訳されました。

スクロールドリブンアニメーションの事例紹介

Swetha Gopalakrishnan

Saurabh Rajpal

スクロールドリブンアニメーションは、ウェブ上で一般的な 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 に置き換えて、同じ効果を実現することができました。

ユースケース

画像表示（モバイルの場合）とカバーフロー（パソコンの場合）を備えたフォトギャラリー。

redBus の「Things To Do」フォトギャラリーで画像を読み込むためのスクロール駆動型アニメーション画像の表示効果。

コード（モバイル）

上記の例では、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）

投資と生命 LOB（事業部門）の比較プランテーブルのスクロールドリブンアニメーション animate-timeline。

コード

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（ホームページ）

redBus の「おすすめスポット」ランディングページで商品カードを読み込むためのスクロールドリブンアニメーションのフライイン効果。

Policybazaar（商品リスティングページ）

投資と生命 LOB（事業部門）の商品カードのスクロールドリブンアニメーションのフェードインとフェードアウト。

Tokopedia（商品の詳細ページ）

表示された商品をスクロールする際の、フェードインとフェードアウトのアニメーション。

Scroll-Drive Animations API を使用する際の考慮事項

スクロールタイムラインのポリフィルなどを使用すると、非対応のブラウザでもスクロールドリブンアニメーションをポリフィルできます。その場合、追加のテストを行い、フレームワークと適切に連携して動作することと、ポリフィルを使用するブラウザでアニメーションの失敗やジャンクが発生することがないことを確認します。

スクロールドリブンアニメーションを使用する前に、CSS から @supports を使用してアニメーションタイムラインのサポートをテストできます。次に例を示します。

@supports (animation-timeline: scroll()) {

}

リソース

ビュー遷移、ポップオーバー、コンテナクエリ、has() セレクタなどの新しい CSS や UI 機能を使用することで e コマース企業がどのようにメリットを得たかについて説明しているこのシリーズの他の記事もご覧ください。