スクロールドリブン アニメーション ウェブで一般的な 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 コマースのコンバージョン プロセス全体におけるブラウジング エクスペリエンス。
で確認できます。 <ph type="x-smartling-placeholder">従来のソフトウェア ツールと比べてコード行を最大 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 を使用したフォト ギャラリー( およびカバーフロー( パソコン)。
<ph type="x-smartling-placeholder">コード(モバイル)
前の例では、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 はスクロールドリブン アニメーションを使用して、 ユーザーがテーブルをスクロールしたときの優先順位の低い要素のサイズ。この は、読みやすさを向上させつつ、滑らかなスクロール体験を実現しました。
で確認できます。 <ph type="x-smartling-placeholder">スクロールドリブン アニメーションを使用すると、 ユーザーがプランを比較できるようにすることで、焦点を絞って見やすいコンテンツを読むことができます —Rishabh Mehrotra 氏、 PolicyBazaar、生命保険の BU 設計担当
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 type="x-smartling-placeholder">Policybazaar(商品リスティング ページ)
<ph type="x-smartling-placeholder">Tokopedia(商品の詳細ページ)
<ph type="x-smartling-placeholder">スクロールドリブン アニメーション API を使用する際の考慮事項
サポートしていないブラウザでは、スクロールドリブン アニメーションをポリフィルできます。 たとえば スクロール タイムラインのポリフィル。 この操作を行うと、 追加のテストが必要で、実際のテスト環境と と、ポリフィルを使用するブラウザではアニメーションが表示されないことを 生じることがあります。
CSS から @supports
を使用して、アニメーション タイムラインのサポートをテストできます。
スクロールドリブンアニメーションを
使用しないでください例:
@supports (animation-timeline: scroll()) {
}
リソース
- スクロールドリブン アニメーションのデモ
- スクロールドリブン アニメーションでスクロール時の要素をアニメーション化する
- Codelab: CSS でスクロールドリブン アニメーションを使ってみる
- Chrome 拡張機能: スクロールドリブン アニメーション デバッガ
- スクロール タイムラインのポリフィル
- バグや新機能の報告をご希望ですか?ご意見をお聞かせください。
このシリーズの他の記事では、ビュー遷移、ポップオーバー、コンテナクエリ、has()
セレクタなどの CSS や UI の新機能を使用することで e コマース企業がどのようなメリットを得たかについて説明しています。