Apple製品ページで使用されている派手なスクロールアニメーションの1つを作成しましょう

Appleの製品ページは、スムーズなアニメーションで知られています。たとえば、ページを下にスクロールすると、製品が視界にスライドし、MacBookがオンになり、iPhoneが回転します。これらはすべてハードウェアを紹介し、ソフトウェアを示し、製品の使用方法についてインタラクティブなストーリーを伝えます。

iPad ProモバイルWebエクスペリエンスのこのビデオをご覧ください。

そこにある効果の多くは、HTMLとCSSのみを使用して作成されていません。それで、あなたは尋ねますか？まあ、これは把握するのが少し難しいかもしれません。ブラウザのdevtoolsを使用しても、通常は見ることが不可能であるため、常に答えを明らかにするとは限りません<canvas></canvas>要素の外側のコンテンツ。

私たち自身のプロジェクトでこれらの魔法の効果のいくつかを再現できるように、効果の1つを掘り下げて、それがどのように作られているかを見てみましょう。具体的には、AirPods Pro製品ページとヒーロー画像から動的な光効果をコピーしましょう。

基本概念

アイデアは、一連の高速な画像のようにアニメーションを作成することです。本をひっくり返すようなものです！複雑なWebGLシナリオや高度なJavaScriptライブラリは必要ありません。

ユーザーのスクロール位置と各フレームを同期することにより、ユーザーがページを下にスクロールするときにアニメーションを再生できます。

タグとスタイルから始めます

この効果のためのHTMLとCSSは非常に単純です。<canvas></canvas>要素内では、IDを割り当ててJavaScriptを使用して制御します。

CSSでは、ドキュメントの高さを100VHに設定し、コンテンツの高さを100VHより5倍に設定して、機能させるために必要なスクロール長を提供します。また、ドキュメントの背景色を画像の背景色と一致させます。私たちがしなければならない最後のことは位置です<canvas></canvas>要素、中央に、最大幅と高さを制限して、ビューポートのサイズを超えないようにします。

 <code>html { height: 100vh; } body { background: #000; height: 500vh; } canvas { position: fixed; left: 50%; top: 50%; max-height: 100vh; max-width: 100vw; transform: translate(-50%, -50%); }</code>

これで、ページを下にスクロールできます（コンテンツがビューポートの高さを超えない場合でも）、私たちの<canvas></canvas>まだビューポートの上部にあります。 HTMLとCSSに必要なのはこれだけです。

画像の読み込みを続けましょう。

正しい画像を取得します

画像シーケンスを使用するため（再び本をひっくり返すようなもの）、ファイル名に連続して番号が付けられていると仮定します（つまり、0001.jpg、0002.jpg、0003.jpgなど）。

ユーザーのスクロール位置に基づいて、目的の画像ファイルのパスと数を返す関数を書きます。

 <code>const currentFrame = index => ( `https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, '0')}.jpg` )</code>

画像番号は整数であるため、ファイル名に合わせて4桁に到達するまでインデックスに先行するために、文字列に変換し、 padStart(4, '0')を使用する必要があります。たとえば、1をこの関数に渡すと0001が返されます。

これにより、画像パスを処理する方法が得られます。これはです<canvas></canvas>要素に描かれたシーケンスの最初の画像：

ご覧のとおり、最初の画像はページ上にあります。この時点で、それは単なる静的ファイルです。私たちが望むのは、ユーザーのスクロール位置に基づいて更新することです。 1つの画像ファイルをロードするだけでなく、別の画像ファイルを読み込んで置き換えます。私たちはなりたいと思っています<canvas></canvas>上に画像を描画し、シーケンスの次の画像で図面を更新します（ただし、後で説明します）。

私たちが渡す数字に基づいて画像ファイルのパスを生成する関数を作成したため、今行う必要があるのは、ユーザーのスクロール位置を追跡し、そのスクロール位置に対応する画像フレームを決定することです。

画像をユーザーのスクロールの進行状況に接続します

シーケンスで渡す必要がある（したがって、どの画像をロードしたいか）を理解するには、ユーザーのスクロールの進行状況を計算する必要があります。イベントリスナーを作成してイベントを追跡し、いくつかの数学的計算を処理してロードする画像を計算します。

私たちは知る必要があります：

• スクロールが始まり、終了する場所
• ユーザースクロールの進行状況（つまり、ユーザーがスクロールダウンするページの割合）
• ユーザースクロールの進行状況に対応する画像

scrollTopを使用して、要素の垂直スクロール位置（この場合はドキュメントの上部）を取得します。これは、開始値として使用されます。ドキュメントスクロールの高さからウィンドウの高さを差し引くことにより、終了（または最大）値を取得します。そこから、 scrollTop値をユーザーが下にスクロールできる最大値で除算します。これにより、ユーザーのスクロールの進行状況が得られます。

次に、その位置の正しい画像を返すために、画像番号のシーケンスに対応するインデックス番号にそのスクロールの進行状況を変換する必要があります。これを行うには、進捗数にフレームの数（画像数）を掛けることで行うことができます。 Math.floor()を使用してその数を削減し、 Math.min()とフレームの最大数でwrapして、フレームの総数を超えないようにします。

 <code>window.addEventListener('scroll', () => {  const scrollTop = html.scrollTop; const maxScrollTop = html.scrollHeight - window.innerHeight; const scrollFraction = scrollTop / maxScrollTop; const frameIndex = Math.min(  frameCount - 1,  Math.floor(scrollFraction * frameCount) ); });</code>

正しい画像で更新します<canvas></canvas>

ユーザーのスクロールの進行状況が変化したときに、どの画像を描画するかがわかりました。これはです<canvas></canvas>魔法が機能する場所。<canvas></canvas>ゲームやアニメーションからモデルジェネレーターのデザインまで、そしてその間にすべてを構築するための多くのクールな機能があります！

これらの機能の1つは、ブラウザと連携して更新するrequestAnimationFrameと呼ばれる方法です<canvas></canvas>、ではなく直接画像ファイルを使用している場合<canvas></canvas>、これはできません。これが私の選択です<canvas></canvas>たとえばの代わりにメソッドimg要素または背景画像<div>理由。 <code>requestAnimationFrame 、ブラウザのリフレッシュレートと一致し、WebGLを使用してデバイスのビデオカードまたは統合グラフィックカードとレンダリングすることにより、ハードウェアの加速を有効にします。言い換えれば、フレーム間で非常にスムーズな移行を取得します。画像はちらつきません！

ユーザーがページの上または下にスクロールするときに、スクロールイベントリスナーのこの関数を呼び出して画像を交換します。 requestAnimationFrameがコールバックパラメーターを取得するため、関数を渡して画像ソースを更新し、<canvas></canvas>新しい画像を描く：

 <code>requestAnimationFrame(() => updateImage(frameIndex 1))</code>

画像frameIndex 0001.jpgで始まる一方で、スクロールの進行計算は実際には0から始まります。これにより、2つの値が常に整列されることが保証されます。

更新画像に渡すコールバック関数は次のように見えます：

 <code>const updateImage = index => { img.src = currentFrame(index); context.drawImage(img, 0, 0); }</code>

frameIndex関数に渡します。これにより、シーケンスの次の画像を使用して画像ソースが設定されます。<canvas></canvas>要素に。

プリロード画像の方が優れています

技術的には、私たちは今完了です。しかし、どうぞ、私たちはもっとうまくやることができます！たとえば、高速スクロールは、画像フレーム間に少し遅れを起こす可能性があります。これは、新しい画像ごとに新しいネットワークリクエストが送信され、新しいダウンロードが必要なためです。

新しいネットワークリクエストで画像をプリロードしてみる必要があります。このようにして、各フレームがダウンロードされ、遷移がより速くなり、アニメーションがよりスムーズになります！

私たちがしなければならないのは、画像のシーケンス全体をループしてそれらをロードすることです。

 <code>const frameCount = 148; const preloadImages = () => { for (let i = 1; i </code>

デモ！

パフォーマンスの簡単な説明

この効果は非常にクールですが、多くの画像でもあります。正確には、148個です。

画像をどのように最適化しても、CDNがどれだけ速く提供するかに関係なく、何百もの画像をロードすると、常にページが膨らみます。同じページでこの機能を複数回使用するとします。次のパフォーマンス統計を取得する場合があります。

これは、高速インターネット接続と低データキャップを持つユーザーにとっては問題ないかもしれませんが、この利便性がなければユーザーにはそれを言うことはできません。バランスをとるのは難しい問題ですが、すべての人の経験に注意を払わなければなりません。

このバランスを達成するためにできることはいくつかあります。

 <code>- 加载单个后备图像而不是整个图像序列- 为某些设备创建使用较小图像文件的序列- 允许用户启用序列，也许可以使用启动和停止序列的按钮苹果采用第一种方法。如果您在连接到缓慢的3G 连接的移动设备上加载AirPods Pro 页面，那么，性能统计数据开始看起来好多了：是的，它仍然是一个繁重的页面。但它比我们根本没有任何性能考虑的情况下要轻得多。这就是苹果能够将如此多的复杂序列放到单个页面上的方式。 #### 进一步阅读如果您有兴趣了解这些图像序列是如何生成的，一个好的起点是AirBnB 的Lottie 库。文档将引导您完成使用After Effects 生成动画的基础知识，同时提供一种在项目中轻松包含它们的方法。</code>