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

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

Tokopedia

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

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

で確認できます。 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

ユーザーのスクロールに応じて上部の固定バーの表示状態が変わるアニメーション示されます。

コード

次の実装では、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 を使用したフォトギャラリー（およびカバーフロー（パソコン）。

</ph> <ph type="x-smartling-placeholder">

をご覧ください。

redBus の「Things To Do」での画像読み込みの効果を示すスクロール駆動アニメーション画像できます。

コード（モバイル）

前の例では、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 設計担当

で確認できます。 <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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

コード

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

</ph> <ph type="x-smartling-placeholder">

をご覧ください。

redBus の「Things To Do」で商品カードを読み込むためのスクロール駆動型アニメーションのフライイン効果表示されます。

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

</ph> <ph type="x-smartling-placeholder">

をご覧ください。

投資とライフ LOB の商品カードのフェードインとフェードアウト（事業部門）。

Tokopedia（商品の詳細ページ）

</ph> <ph type="x-smartling-placeholder">

をご覧ください。

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

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

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

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

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

}

リソース

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

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

Tokopedia

コード

redBus

ユースケース

コード（モバイル）

ポリシーバザール

コード

ユーザー ジャーニー全体での一般的なパターンとしてのスクロールドリブン アニメーション

redBus（ホームページ）

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

Tokopedia（商品の詳細ページ）

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

リソース

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

ユーザージャーニー全体での一般的なパターンとしてのスクロールドリブンアニメーション

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

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