jQueryとCSS3を使用したスクロールベースのアニメーションの作成

ムーブメントの作成は、視聴者に興味深いインタラクティブな体験を提供する素晴らしい方法です。近代的なサイトがより多くの対話性を提供しているため、シンプルなWebサイトでさえ、訪問者を引き付けるためにある程度のアニメーション /動きを提供することがますます期待されています。

今日、私はあなたがあなたのウェブプロジェクトに適応できるテクニックを概説します - 事前に定義された地域にスクロールするときにアニメーションをトリガーします。これらのアニメーションは、CSS変換とCSS遷移を使用して作成されます。また、jQueryを使用して、要素が表示されているときに検出し、適切なクラスを追加/削除します。

このようになっている例を見たい人のために、あなたはデモにまっすぐジャンプできます。

キーテイクアウト

スクロールベースのアニメーションは、jQueryとCSS3を使用して作成でき、視聴者にインタラクティブなエクスペリエンスを提供します。これらのアニメーションは、ユーザーが事前に定義された地域にスクロールするとトリガーされ、より魅力的で視覚的に魅力的です。
• この手法には、CSS変換とCSS遷移の使用が含まれ、jQueryは要素が表示されている時期を検出し、適切なクラスを追加/削除するために使用されます。このアプローチの考慮事項には、ブラウザの互換性と速度が含まれます。最新のブラウザは、スムーズなアニメーション用の2Dおよび3D変換をサポートしています。
プロセスには、視界のアニメーション要素を検出し、スクロールイベントに接続し、サイズ変更の処理、要素の高さと幅の計算が含まれます。アニメーションは、要素がビューポート内にあるときにトリガーでき、インタラクティブなインターフェイスのために追加の変換または効果を連鎖させることができます。
• スクロールアニメーションの例には、左からの要素のスライド、下から下からのフェード要素、およびマルチステップバウンスアニメーションが含まれます。これらの手法は、スタッフプロファイルやコース情報の表示など、さまざまなWebプロジェクトに適合させることができます。
• なぜスクロールでアニメーションをトリガーするのですか？
• スクロールでアニメーションをトリガーしたい主な理由は、ユーザーが要素を視界にスクロールするときと同じようにアクティブ化することです。

要素をフェードインしたり、興味深い変換を提供したりすることもできます。これらは、ユーザーが実際に表示できるときにのみ意味をなすことです。

cssまたはjqueryでアニメーション化しますか？

各アプローチには長所と短所があります。 jQuery（読み取りJavaScript）を使用すると、CSSがそうでないこと（スクロール位置や要素の属性など）をアニメーション化できます。層。

CSSを介して変換を使用しますが、状況に応じて考慮すべき変数が常にあります。次の要因を考慮に入れます：

ブラウザの互換性

ソリューションは変換に基づいているため、ブラウザの互換性は2D変換または3D変換のいずれかをサポートするものに制限されます。

すべての最新のブラウザは3D変換をサポートし、Internet Explorer 9やOpera 11.5などの古いレガシーブラウザのいくつかは2D変換をサポートします。デスクトップブラウザとモバイルブラウザの両方の全体的なサポートは包括的です。

jQueryのアニメーションメソッドは、ライブラリの1.xバージョンを使用している場合、任意の（SANE）ブラウザーで機能します。 jQuery 2.xはIE8以下のサポートを削除したため、レガシーブラウザをサポートする必要がない場合にのみ使用します（幸運！）

速度

特にモバイルデバイスに関しては、高速でスムーズなアニメーションが必要です。そのため、可能な場合は移行と変換を使用するのが常に最善です。

この例では、古いブラウザーに2Dフォールバックを備えた3D変換を使用します。ハードウェアアクセラレーションに速度を強制したいので、3D変換は必須です（GPU加速レンダリングを引き起こす他の機能とともにTranslate3Dを使用します）。

jQueryのアニメートメソッドはGPU支援変換よりもかなり遅いため、アニメーション自体ではなく、イベント処理 /計算にJQueryを使用するだけです（可能な限りスムーズにしたいからです）。

サイドノート

私たちは皆、jquery！== javascriptを知っていますよね？まあ、アニメーションにバニラJSを使用することは、結局のところそれほど悪い考えではないかもしれません。それはこのチュートリアルの範囲を超えていますが、もっと知りたい人のための主題に関する2つの優れた記事を次に示します。

css vs. jsアニメーション：どちらがより速いですか？

神話のバスト：CSSアニメーションvs. javascript
• ショーに戻って…

ビューのアニメーション要素の検出

この手法の全体的なポイントは、アニメーションとしてマークされたすべての要素を調べ、現在ビューポート内にいるかどうかを判断することです。これをどのように達成するかを踏んでみましょう：

セレクターキャッシュ

スクロールは高価なビジネスです。イベントリスナーをスクロールイベントに添付すると、ユーザーがページをスクロールするたびに何度も発射されます。ユーザーがスクロールするたびに、ディメンション /計算関数を呼び出すため、セレクターによって返される要素を変数に保存することをお勧めします。これはセレクターキャッシングとして知られており、DOMを何度も依頼することを避けます。

スクリプトでは、ウィンドウオブジェクトとアニメーション化する要素のコレクションの両方を参照します。

変数の前のドルのサインに注意してください。これは、彼らがjQueryオブジェクト、またはオブジェクトのコレクションを保持していることを示すための慣習です。

スクロールイベントにフック

次に、スクロールイベントに対応するイベントハンドラーを作成します。これは、ページをスクロールするときに発射されます。 CHECK_IF_IN_VIEW関数（すぐに到達します）への参照を渡します。スクロールイベントが起動するたびに、この機能が実行されます。

<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>

サイズ変更の処理

高さと幅を計算しているため、一般的なサイズ変更とともに方向の変更を考慮する必要があります。

イベントハンドラーを更新して、巻物とサイズの両方のイベントを聞くことができます。これにより、オリエンテーションを変更または変更するときに検出機能が機能するようになります。

さらに、jqueryトリガーメソッドを使用して、DOMの準備ができたらすぐにスクロールイベントをトリガーします。これを行い、アニメーション化される必要のある要素のいずれかがビューポート内にある場合、ビューのように検出され、アニメーションがスクロールしているかのように適用されます。

$<span>window.on('scroll', check_if_in_view);</span>

scroll位置検出

$<span>window.on('scroll resize', check_if_in_view);</span>

この例の実際の検出部分は、次のスクリプトに由来しています。

ここで何が起こっているのかを分解します。

$<span>window.trigger('scroll');</span>

窓の現在の高さとその上部と下の位置を取得するので、見ている領域がわかります。

私たちは、アニメーション化するすべてのアイテム（$ animation_elements変数に保存）を調べます。これらの要素それぞれについて、その高さと下部の位置とともに高さを収集します（したがって、ページのどこに住んでいるかがわかります）。

各アイテムを比較して、その下位置がウィンドウの上位の位置よりも大きいかどうかを確認しますが、アイテムの上位の位置はウィンドウの下位置よりも小さいことを確認します。

視覚的な例

高さと幅の計算

検出機能では、物事を正しく計算するためにさまざまな要素の高さと位置を取得する必要があります。これは、jQueryの高さ関数を使用した場所です。 これらの高さ機能がどのように機能するかについての内訳を持つことが重要です

height（）およびwidth（）

高さ（）とwidth（）関数は、要素の高さまたは幅を返します。彼らはすべてのパディング、境界、マージンを除外します

完全な内訳については、高さまたは幅のドキュメントにアクセスしてください。

innerheight（）およびinnerwidth（）

innerheight（）およびinnerwidth（）関数は、追加のパディングを含む要素の高さまたは幅を返します（ただし、境界とマージンの両方を除外します）

完全な内訳については、内側または内幅のドキュメントをご覧ください。

outerheight（）およびouterwidth（）

outerheight（）およびouterwidth（）関数は、要素の高さまたは幅を返し、そのパディングと境界線を含みます。 さらに、関数にtrueの値を渡すことにより、マージンを含めるように指定することもできます。

完全な内訳については、外側の文書または外側のドキュメントをご覧ください

アニメーションの例をスクロールします

以下にリストされているのは、議論したことの基本を使用する一連のアニメーションです。これらの例では、アニメーション要素を探し、ビューポート内にあるときにアクティブなビュークラスを適用します。 移動したい要素はすべて、その位置を相対的または絶対に設定するアニメーション要素などの標準クラスをすべて備えている必要があります。さらに、複数のエフェクトを作成する場合は、視聴クラスと組み合わせることができるスライド左などの対応するクラスを作成できます。次に、Animation-Element.Slide-Left.Inviewなどのクラスに変換を適用する必要があります。

左からスライドします

最初の例では、ビューポートに入ると、左から要素をスライドさせます。 これを実現し、Elements x軸でtranslate3dを使用します。

スクロールでペンCSSアニメーションを参照してください - 左からSitePoint（@SitePoint）Codepenのスライド。 この例では、スタッフプロファイルを表示するために使用しましたが、同じ機能を再評価して、必要な要素をスライドさせることができます。

底からフェードイン

今回は、ユーザーがスクロールするときに、下から上から要素を衰退させます。これは、要素のy軸上のtranslate3dを介して達成します。

この例では、グリッド構造のトピックに関するコース情報をリストしました。ユーザーが下にスクロールすると、ビューの各カードがフェードインして上に移動し、コースに関する情報が表示されます。

スクロールでペンCSSアニメーションを参照してください - CodepenのSitePoint（@SitePoint）でボトムアップからフェードアップします。

マルチステップバウンスアニメーション

最後の例では、多段階のアニメーションを使用します。これを行うには、回転と翻訳を組み合わせたカスタムキーフレームアニメーションを定義します。このタイプのアニメーションは、Webサイトの領域を紹介するのに役立ちます（この例では、スタッフのプロファイルを紹介しています）。

ここからどこへ？

ここから、学んだ概念を取り入れて、プロジェクトに適用できます。

要素が見られるときに検出できるようになったので、追加の変換または効果をチェーンしてインタラクティブなインターフェイスを作成できます。たとえば、要素がビューポートに入るとき（およびその変換後）、タイトルでフェードする、画像のスケーリングなどの追加要素を変換できます。

あなたはすでにあなたのプロジェクトでこれらの効果を使用していますか？それとも、アニメーションは使いすぎてユーザーエクスペリエンスを損なうと思いますか？いずれにせよ、私はあなたからコメントで聞いてみたいです。

ティファニーB.ブラウンによる本CSSマスター、第2版でCSSスキルを次のレベルに引き上げます - CSSアニメーション、トランジション、変換などをカバーします。 jqueryとcss3を使用したスクロールベースのアニメーションに関するよくある質問（FAQ）

jQueryとCSS3を使用してスクロールベースのアニメーションを作成するための基本的な要件は何ですか？

JQueryとCSS3を使用してスクロールベースのアニメーションを作成するには、HTML、CSS、およびJavaScriptの基本的な理解が必要です。また、プロジェクトにjqueryライブラリを含める必要があります。 jQueryは、HTMLドキュメントの移動、イベントの処理、アニメーションを簡素化する高速で小さく、機能が豊富なJavaScriptライブラリです。一方、CSS3は、カスケードスタイルシートの言語の最新の進化であり、CSS2.1の拡張を目指しています。丸い角、影、勾配、遷移、アニメーションなど、待望のノベルティがたくさんあります。スクロールベースのアニメーションを作成するには、最初にJQueryライブラリをHTMLファイルに含める必要があります。 jQuery Webサイトからダウンロードするか、コンテンツ配信ネットワーク（CDN）から直接含めることができます。 jQueryを含めたら、JavaScriptコードを別の.JSファイルまたはHTMLファイルにスクリプトタグ内で書き始めることができます。その後、jQueryの.animate（）メソッドを使用してアニメーションを作成できます。 CSS3アニメーションの場合、キーフレームとアニメーションプロパティを使用できます。

jQueryのスクロールベースのアニメーションの速度を制御できますか？ jqueryで。 .Animate（）メソッドは、アニメーションが実行される期間を決定する期間パラメーターを受け入れます。期間はミリ秒単位で指定されています。より高い値は、より速いアニメーションではなく、より速いアニメーションを示します。

スクロールベースのアニメーションをよりスムーズにするにはどうすればよいですか？

スクロールベースのアニメーションをよりスムーズにするには、 'ease-inを使用できます-out 'CSS3遷移 - 整理機能プロパティの値。この値は、アニメーションがゆっくりと起動し、中央で加速し、最後に遅くなることを指定します。これは、あなたのアニメーションにもっと自然で滑らかな感触を与えることができます。

ユーザーがページ上の特定のポイントにスクロールしたときにアニメーションをトリガーするにはどうすればよいですか？

jqueryの.scroll（）メソッドを使用して、ユーザーがスクロールしたときにイベントをトリガーすることができます。ページ。 .scroll（）メソッド内で、.scrolltop（）メソッドを使用して、スクロールバーの現在の垂直位置を取得できます。次に、IFステートメントを使用して、スクロール位置が特定のポイントを超えているかどうかを確認できます。もしそうなら、アニメーションをトリガーします。 jQueryなしでCSS3アニメーションを使用できます。 CSS3は、@KeyFramesルールとアニメーションプロパティを導入します。これにより、CSSのみを使用してアニメーションを作成できます。ただし、jQueryは、ユーザーのインタラクションに基づいて動的に変更されたアニメーションプロパティなど、アニメーションに対してより多くの制御と柔軟性を提供できます。 .Stop（）メソッドを使用して、jQueryのスクロールベースのアニメーションを停止できます。このメソッドは、選択した要素で現在実行されているアニメーションを停止します。アニメーションを一時停止するためには、JQueryがアニメーションの一時停止をネイティブにサポートしていないため、もう少し複雑です。ただし、プラグインを使用するか、アニメーションの状態と進行状況を手動で追跡することでこれを達成できます。背景画像が前景画像よりも遅くなるテクニック、深さの幻想を生み出します。ページスクロールの速度に関連して背景画像の動きの速度を変更することにより、jQueryとCSS3を使用してこの効果を達成できます。 >はい、jQueryの.animate（）メソッドを使用して、複数のCSSプロパティを一度にアニメーション化できます。 .animate（）メソッドのプロパティオブジェクトパラメーターにキー値のペアとしてアニメーション化するプロパティを含める必要があります。 🎜>

さまざまなブラウザーでスクロールベースのアニメーションが機能するようにするには、常にCSS3プロパティにベンダープレフィックスを使用する必要があります。これらの接頭辞は、たとえ実験的であっても、プロパティがすべてのブラウザで認識されることを保証します。 jQueryアニメーションの場合、jqueryがこれを処理しているため、ブラウザの互換性を心配する必要はありません。

以上がjQueryとCSS3を使用したスクロールベースのアニメーションの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。