スクロールテクノロジーの概要

Webスクロールアニメーションテクノロジーは長年存在しており、近年ますます広く使用されています。これは、デバイスのパフォーマンスの改善とアニメーション効果をより適切に処理する能力に一部起因する可能性があります。

この記事は、さまざまな巻物関連のテクノロジーの概要を説明し、適切なソリューションを見つけるのに役立つツール選択ガイドを提供することを目的としています。これらのテクノロジーは、特定のスクロール行動の手法と、より一般的なスクロール行動のための手法の2つのカテゴリにほぼ分けることができます。

特定のスクロール動作の手法

最新のブラウザは、いくつかの単純なネイティブCSSスクロール効果をサポートしています。これは、限られたユースケースでは、スクロールアニメーションのニーズを満たすのに十分です。

position: sticky

スクロール中に同じ位置にとどまるためにページ上に要素が必要な場合、 position: sticky良い選択です。シンプルで簡単で、最新のブラウザに組み込まれています。ただし、IEブラウザと一部のモバイルブラウザにはポリフィルサポートが必要です。

CSS視差

これはトリックほどテクニックではありませんが、単純な視差効果のために非常に実用的であるため、ページのさまざまな速度でさまざまな速度で巻き付けることができます。最大の欠点は、正確な視差効果を達成するために視点と変換を設定するために使用する価値を理解することが困難であることです。

CSSスクロールキャプチャポイント

スクロールスナップポイントを使用すると、ユーザーが正常にスクロールを終了した後に設定した特定のスクロール位置をブラウザがキャプチャできます。これにより、特定の要素を表示しておくことができます。ただし、APIはまだ変化しているため、最新のAPIを使用して、生産時に依存しないように注意してください。

滑らかなスクロール

window.scrollTo()を使用して、javascriptまたはcssでscroll-behavior属性を使用して、ページ内のさまざまな部分にジャンプするときに滑らかなスクロールがネイティブにサポートされます。現在、すべてのブラウザが滑らかなマウスホイール操作でユニバーサルスムーズスクロールをネイティブにサポートするわけではありません。さまざまなJavaScriptライブラリが、マウスホイール操作にスムーズなスクロールサポートを追加しようとしていますが、完全にバグがないライブラリを見つけておらず、他のすべてのスクロールテクニックとうまく機能しています。また、スムーズなスクロール自体が必ずしも良い選択ではありません。

ユニバーサルスクロール動作の手法

現在、CSSのみを使用してスクロール位置に基づいてユニバーサルアニメーションを作成またはトリガーすることは不可能です（ただし、遠い将来に何らかの形のユニバーサルCSSベースのユニバーサルスクロールアニメーションをサポートする提案があります）、アニメーションの一部を消去することもできません。したがって、スクロール中に要素をアニメーション化する場合は、少なくともJavaScriptを使用して、目的の効果を作成する必要があります。 JavaScriptを使用してスクロールするときにアニメーションをトリガーする2つの主な方法があります。クロスビューアを使用し、スクロールイベントを使用します。

IntersectionObserver

クロスオブザーバーは、要素がビューポートに表示されているかどうか、およびそれがどれだけ適しているかについての情報のみが必要な場合に役立ちます。これにより、アニメーションを公開するのに適した選択肢になります。それでも、要素がビューポートに入る方向に基づいて異なるアニメーションをトリガーするなど、クロスビューアーを使用するなど、いくつかの困難があります（不可能ではありませんが）。クロスビューアーは、要素が開始点とエンドポイントの間にあるときにスクロールアニメーションを実行したい場合、それに重複しない場合にもあまり役に立ちません。

スクロールイベントを使用します

スクロールイベントを使用すると、スクロールアニメーションを制御する上で最大の自由が得られます。ビューポート内の要素の位置に関係なくスクロールするときに要素に影響を与えることができ、プロジェクトのニーズに応じて正確に開始点とエンドポイントを設定できます。

そうは言っても、それが正しくスロットリングされておらず、特定の動作を作成するための便利なAPIがない場合、パフォーマンスに大きな影響を与える可能性もあります。これが、優れたスクロールライブラリを使用して、スロットリングを処理し、より便利なAPIを使用するのに役立つことが多い理由です。一部のライブラリは、あなたのために多くのサイズ変更の問題を処理することさえできます！

ユニバーサルスクロールの動作を作成するためのツール

すべての計算を自分で実行することなく、スクロールアニメーションを完全に制御しようとする全体的なスクロールライブラリがいくつかあります。

ScrollMagic

ScrollMagicは、さまざまなスクロール効果を作成するための比較的単純なAPIを提供し、GSAPやVelocity.jsなどのさまざまなアニメーションライブラリにリンクできます。ただし、過去数年間でメンテナンスがますます少なく、Scrollsceneの作成につながりました。

Scrollscene

Scrollsceneは、基本的に、ScrollMagicおよび/またはクロスビューアーを使いやすくしようとするラッパーです。 ScrollMagicのカスタムメンテナンスバージョンを使用し、ビデオ再生、シーンの初期化ブレークポイント、シーンの持続時間ブレークポイントなどの追加機能を追加します。 GSAPも使用します。

スクロールトリガー

Scrolltriggerは、GSAPの公式Greensockプラグインです。機能の長いリストがあり、スクロールライブラリで使用できる最も簡単なAPIがあります（少なくとも私にとっては）。それを使用すると、スクロール中にアニメーションのスクロールとアニメーションの位置を定義し、アニメーション化することを完全に制御できます。滑らかなスクロールライブラリに接続することもでき、それらは完全に連携します。さらに、GreensockとGreensockのフォーラムでサポートされています。

言及する価値：機関車の巻物

上記の他のライブラリのような包括的なスクロールライブラリになろうとはしませんが、機関車スクロールは、カスタムの滑らかなスクロールの提供に焦点を当てています。また、データ属性を追加するか、 onscrollイベントをフックして他のタイプのオブジェクトをアニメーション化することにより、DOMオブジェクトの一部のプロパティをアニメーション化することもできます。

要約します

スティッキーポジショニングや視差などの特定の特定のスクロールアニメーション効果については、少なくともこれらのプロパティをサポートしていないブラウザをサポートするためにPolyFillを使用する場合は、CSSテクノロジーで十分かもしれません。

GSAPのScrolltriggerを使用することをお勧めします。これは、CSSプロパティができるすべてを実行できるためです。 Scrolltriggerはブラウザのサポートと計算を処理して、アニメーションに集中できるようにします！

次の表には、特定の効果を作成するために使用できるツールを示します。

（ここに表を挿入して、パフォーマンス、使いやすさ、機能など、さまざまなスクロールテクノロジーのさまざまな側面を比較する必要があります。）

以上がスクロールテクノロジーの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。