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

Swetha Gopalakrishnan

Saurabh Rajpal

スクロールドリブン アニメーション ウェブで一般的な UX パターンです。スクロールドリブン アニメーションはスクロール コンテナのスクロール位置にリンクされます。つまり 上下にスクロールすると、リンクされたアニメーションが前後にスクラブされます。 直接レスポンスで生成できます例として、視差効果のある背景などの効果が挙げられます スクロールに合わせて移動します

デベロッパーは通常、JavaScript を使用してスクロールドリブン アニメーションを作成しています を使用してメインスレッドでのスクロール イベントに応答します。そのため 高パフォーマンスのスクロールドリブン アニメーションが実現します。これは、 スクロール イベントが非同期で配信されるため、 あります。

ただし、新しい ブラウザで実装される CSS と UI 機能 1 対 1 の 宣言型スクロールドリブン アニメーションを作成できます。スクロール タイムラインとビュー機能 タイムライン、既存のサービスと統合される新しいコンセプト Web Animations API（WAAPI）と CSS Animations API アニメーションが滑らかに スクロールドリブン アニメーションをメインスレッドから実行し、わずか数行の できます。この活用事例では、Tokopedia、redBus、Policybazaar がどのように この新機能の恩恵を受けています

Tokopedia

Tokopedia は、以前のカスタム JavaScript 実装を ページのパフォーマンスを最適化し、スクロールドリブンのアニメーションを e コマースのコンバージョン プロセス全体におけるブラウジング エクスペリエンス。

従来のソフトウェア ツールと比べてコード行を最大 80% 削減できました。 スクロールイベントに対する平均 CPU 使用率が スクロール中の 50% から 2% に減少 - Andy Wihalim 氏、 Tokopedia、シニア ソフトウェア エンジニア

コード

次の実装では、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 のモバイルとパソコンで異なるアニメーションを使用しています Things-To-Do リストのランディング ページが表示されている 全ユーザーに コンバージョンファネルの早い段階でスクロールドリブン アニメーションを使用すると、 カスタムの JavaScript 実装を CSS に置き換えて 影響します。

ユースケース

画像 Reveal を使用したフォト ギャラリー（ およびカバーフロー（ パソコン）。

コード（モバイル）

前の例では、Tokopedia は匿名のスクロール進行状況を使用します。 タイムラインをご覧ください。次のコードでは、 タイムラインをご覧ください。このアニメーションにより、<img> の opacity と clip-path が変更されます。 要素の最も近い、定義された animation-range 内の要素 祖先スクローラー（この場合はフォト ギャラリー スクローラー）です。

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 のページエクスペリエンスシグナルを強化します上: 習得が容易なので 確認できます他のチームからも好意的なフィードバックやサポートを得て、 SDA でユーザー ジャーニーを拡充。 シニア エンジニアリング担当 Amit Kumar RedBus のマネージャー

ポリシーバザール

保険プランの比較は、保険プランの比較を行うためにユーザーが行う重要なアクションです。 プロセスです。Policybazaar はスクロールドリブン アニメーションを使用して、 ユーザーがテーブルをスクロールしたときの優先順位の低い要素のサイズ。この は、読みやすさを向上させつつ、滑らかなスクロール体験を実現しました。

スクロールドリブン アニメーションを使用すると、 ユーザーがプランを比較できるようにすることで、焦点を絞って見やすいコンテンツを読むことができます —Rishabh Mehrotra 氏、 PolicyBazaar、生命保険の BU 設計担当

コード

前の 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 アニメーションの進行状況を設定します。 追加します。

@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（商品の詳細ページ）

スクロールドリブン アニメーション API を使用する際の考慮事項

サポートしていないブラウザでは、スクロールドリブン アニメーションをポリフィルできます。 たとえば スクロール タイムラインのポリフィル。 この操作を行うと、 追加のテストが必要で、実際のテスト環境と と、ポリフィルを使用するブラウザではアニメーションが表示されないことを 生じることがあります。

CSS から @supports を使用して、アニメーション タイムラインのサポートをテストできます。 スクロールドリブンアニメーションを 使用しないでください例:

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

}

リソース

• スクロールドリブン アニメーションのデモ
• スクロールドリブン アニメーションでスクロール時の要素をアニメーション化する
• Codelab: CSS でスクロールドリブン アニメーションを使ってみる
• Chrome 拡張機能: スクロールドリブン アニメーション デバッガ
• スクロール タイムラインのポリフィル
• バグや新機能の報告をご希望ですか？ご意見をお聞かせください。

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

• ウェブ UI 機能が e コマース サイトにとって重要な理由
• 移行の事例紹介を見る
• Popover API の事例紹介
• コンテナクエリの事例紹介
• :has() セレクタの事例紹介