スクロール技術の概要

Webページのスクロールに関連するアニメーションは、長年使用されています。最近、そのようなアニメーションがより一般的になっています。おそらくこれの一部は、インターネットをサーフィンするために使用されるデバイスがより強力になったためです。これらのデバイスは、以前よりも多くの視覚効果を適切に処理および出力できます。 多くのスクロール技術があります。この記事の目的は、特定の状況ごとに必要なものを選択および作成するのに役立つ、このようなテクノロジーとツールの概要を提供することです。私は、スクロール技術を2つの大きなカテゴリーに分けます。1つ目は特定のスクロールメカニズムを実装するためのテクノロジーを含み、2つ目は汎用スクロールテクノロジーを含みます。

特定のスクロールメカニズムを実装するためのテクノロジ

CSSには、最新のブラウザーでサポートされている単純な標準スクロール効果がいくつかあります。場合によっては、それらのアプリケーションはプロジェクトの特定のニーズを満たすのに十分かもしれません。

▍CSSプロパティの位置：スティッキー

残りのページコンテンツと一緒にスクロールしない要素が必要な場合は、この要素のスタイルを設定するときに、プロパティを適用するだけで十分position: stickyです。これはシンプルで単純なトリックであり、そのサポートは最新のブラウザーに組み込まれています。しかし、これをIEや一部のモバイルブラウザーで機能させるには、ポリフィルが必要です。このトピックに興味がある場合は、この資料をご覧ください。





青い要素はコンテナの上部に「残り」、他の要素と一緒にスクロールしません。



このようなスクロールの例を次に示します。

▍視差効果

視差効果は、むしろ特別な技術ではなく、特別な技術です。ただし、この効果は、スクロール時にページのさまざまな部分がさまざまな速度で移動する必要がある場合に、非常に役立ちます。このテクニックは、この資料で詳しく説明されています。その実装の多くの例があります。たとえば、これ。私にとって、この手法の主な欠点は、正しい視差効果を与えるどの値を使用してパースペクティブと変換を設定するかを理解することが難しいことです。





視差効果：要素は異なる速度で移動します。



これが視差効果のデモです。

specific特定のポイントまでスクロール

アンカーポイントでスクロールを使用すると、ユーザーが通常のスクロール操作を完了した後で、ブラウザーが要素を特定の位置に移動することで、要素の位置を自動的に調整できます。これは、スクロールの終了後、特定の要素が完全にユーザーの視野に入る必要がある場合に役立ちます。ただし、APIはまだ不安定であるため、最新の実装を使用して、本番環境でのスクロールにこのアプローチを使用する場合は注意してください。これは、この件に関する優れた記事です。





ユーザがコンテンツをスクロールして、コンテナの上部ボーダーオフ要素を移動した場合、それはその全体が見えるように、ブラウザが自動的に要素を再配置します。



ここでアンカーポイントを持つ作品をスクロールする方法のデモが。

▍スムーズなスクロール

JavaScriptでwindow.scrollTo（） メソッドを使用して、またはscroll-behavior CSSプロパティを使用してページを特定のセクションにスクロールする場合、ブラウザツールはスムーズスクロールをサポートしています。現在、マウスホイールの動きをスムーズにしてスムーズスクロールを実装するには、特別なJavaScriptライブラリが必要です。ただし、このようなライブラリを使用する場合は、他のスクロールテクノロジとの通常の相互作用を保証する必要があります。さらに、スムーズスクロールを使用することは必ずしも良い考えではありません。

一般的なスクロール技術

現在、スクロール位置に基づいて汎用のスクロールアニメーションをトリガーするCSS専用の方法はありません（将来的には、いくつかの汎用のスクロールアニメーションを自由に使えるようにするという提案があります） 。その結果、スクロールしながら要素をアニメーション化したい場合、少なくともいくつかのJavaScriptコードを使用して、目的の効果を得る必要があります。JavaScriptを使用して要素をスクロールしながらアニメーション化するには、2つの方法があります。1つ目はIntersection Observer APIを使用すること、2つ目はイベントを処理することscrollです。

the交差オブザーバーAPIの使用

IntersectionObserver APIを使用すると、アニメーションを開始するために必要なのが、要素がビューポートに表示されているかどうか、および要素のどの部分が表示されているかを知っている場合、スクロールに関連するさまざまなタスクを正常に解決できます。 。これにより、IntersectionObserver APIは、画面上の要素の外観に伴うアニメーションを起動するための優れたツールになります。しかし、それでも、このAPIを使用して実装することは（可能ですが）非常に困難な効果があります。たとえば、要素の移動方向に応じて、さまざまなアニメーションが起動します。さらに、このAPIは、スクロール時に、要素がビューポートの中央にあるときにアニメーションを開始する必要がある場合、つまり、ビューポートに要素が表示されない、または要素が表示されない場合には、特に役立ちません。

thescrollイベントの使用

スクロール中のアニメーションの実装にイベントを使用する人にとって、scroll非常に大きなチャンスがあります。この手法を使用すると、スクロール時に、ビューポートの境界線を基準にして要素の任意の位置にある要素に影響を与えることができます。イベントを使用scrollすると、プロジェクトのニーズに応じて、アニメーションの開始と終了の位置を非常に正確に設定できます。



このため、アニメーションをスクロールするこのアプローチは、システムに大きな負荷をかける可能性があることに注意してください。これは、開発者がパフォーマンスを気にせず、イベント処理の頻度を制限しない場合に発生しますscroll。さらに、イベントを使用することに決めたプログラマーの処分でscroll、さまざまなスクロールシナリオを実装できる便利なAPIはありません。そのため、多くの場合、イベント処理メカニズムをscroll独自に実装する代わりに、作成者がイベント処理scrollがパフォーマンスとAPI の両方に与える影響をすでに処理している専用ライブラリを使用することが理にかなっています。これらのライブラリの一部は、要素のサイズに問題がある場合に開発者を支援することさえできます。

汎用スクロールツール

開発者がページをスクロールするときに実行されるアニメーションを完全に制御できるようにし、開発者が自分で複雑な計算をせずにできるだけ簡単に生活できるようにすることを目的とした強力なスクロールライブラリがいくつかあります。

▍ScrollMagic

ScrollMagic ライブラリは、さまざまなスクロール効果を作成できる比較的シンプルなAPIを提供します。このライブラリは、GSAPやVelocity.jsなどのさまざまなアニメーションライブラリと連携できます。確かに、ここ数年、このライブラリは十分にサポートされていません。これにより、ScrollSceneライブラリが作成されました。

▍ScrollScene

ScrollSceneは、本質的には、ScrollMagicライブラリやIntersectionObserver APIの使いやすさを向上させることを目的としたラッパーです。独自のバージョンのScrollMagicを使用しており、通常のライブラリよりもサポートが優れています。ビデオの再生やアニメーションに影響を与えるブレークポイントのサポートなど、ここには追加の機能があります。また、このライブラリはGSAPを使用しています。

▍ScrollTrigger

ScrollTrigger ライブラリは、GSAPの公式GreenSockプラグインです。このライブラリには多数の機能があり、そのAPIは既存のスクロールライブラリの最も単純なAPIのようです。このライブラリを使用すると、スクロールアニメーションの開始位置と終了位置を完全に制御でき、スクロール中に必要なもの（WebGL、キャンバス、SVG、DOM）をアニメーション化でき、アニメーションの実行中に要素を固定できます。このライブラリの機能はこれに限定されません。さらに、GreenSockはこのライブラリをサポートしています。GreenSock フォーラムでライブラリの使用に関するヘルプを入手できます。

▍注目のライブラリ：機関車スクロール

Locomotive Scroll ライブラリーは、これまでに説明した他のライブラリーほど幅広い機能セットを提供しようとはしていません。その主な目標は、スムーズなスクロールの実装です。さらに、属性を使用してDOMオブジェクトの一部のプロパティをアニメーション化したりdata-*、ハンドラーonscrollを使用して他のタイプのオブジェクトをアニメーション化したりできます。

テクノロジーとツールの比較

以下は、スクロール技術の比較です。





以下は、レビューされたライブラリの比較です。

概要

要素の固定や視差効果などの特別なスクロールメカニズムを実装するには、標準のCSS機能で十分な場合があります。対応するCSS機能をサポートしないブラウザーにポリフィルを使用する場合、少なくともこれは当てはまります。



私は通常、ScrollTriggerライブラリを使用してスクロールをカスタマイズすることをお勧めします。これにより、純粋なCSSで可能なすべての機能を実現できます。このライブラリは、特定のテクノロジのブラウザサポートを処理し、計算をより簡単に実行できるようにします。これにより、ライブラリを使用する人は、自分のビジネスに取り掛かることができます。



プロジェクトでスクロールを設定するときにどのテクノロジーを使用しますか？