AOSライブラリで簡単に作られたスクロールアニメーションでクールなスクロールアニメーション

フロントエンド開発者として、クライアントから得られる人気のリクエストは、ページスクロールに見事なアニメーション効果を実装することです。このタスクを簡単にするライブラリがたくさんあります。 Animate on Scrollとも呼ばれるAOSは、そのようなライブラリの1つであり、その名前が示唆していることを正確に行います。それは、視界をスクロールするときに、さまざまな種類のアニメーションを要素に適用できるようにします。

ここでは、AOSの内側の仕組み、ライブラリをインストールして動作させる方法について学びます。このチュートリアルの終わりまでに、クライアントのスクロールにアニメーションを構築するのは簡単です。

キーテイクアウト

アニメーションオンスクロール（AOS）ライブラリは、フロントエンド開発者がオンスクロールアニメーションを簡単に作成するための便利なツールであり、フェード、フリップ、スライドなどのさまざまなアニメーションタイプを提供します。

AOSライブラリは、BowerまたはNPMを使用してインストールし、単一のコードで初期化できます。初期化されたら、HTML要素に特定の属性を追加することでアニメーションを適用できます。
• AOSを使用すると、開発者は、データAOSオフセット、Data-AOS-Duration、Data-AOS-Easingなどのデータ属性を使用してアニメーションを構成できます。また、他の要素の位置に基づいてアニメーションをトリガーするオプションを提供し、アニメーションのデフォルトの動作を変更し、アニメーションを1回または毎回再生する必要があるかどうかを制御します。
AOSライブラリは、クリーナーで保守可能なワークフローのロジックとアニメーションを分離します。要素とその位置を追跡し、提供された設定に基づいてAOSの高度なクラスを動的に追加または削除します。ライブラリはまた、カスタムアニメーションの作成を許可し、特定のデバイスまたは特定の条件下でアニメーションを無効にするための機能を提供します。
AOSライブラリをインストールする方法
bowerまたはnpmを使用してaosをインストールできます。
bower：

npm：

bower <span>install aos --save</span>

次に、AOSスタイルとスクリプトをリンクします：

<span>npm install aos --save</span>

必要に応じて、次のようにCDNを使用してAOS StyleSheetおよびJavaScriptファイルをダウンロードできます。

css：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script</span> src<span>="bower_components/aos/dist/aos.js"</span>></span><span><span></script</span>></span></span>

javascript：

それだけです、他の依存関係はありません。これは、あなたのウェブサイトのパフォーマンスを制御し続けるのに役立ちます。

<span><span><span><link</span> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span>

AOSを初期化するには、JavaScriptファイルに以下の行を書くだけです。

AOS

<span><span><span><script</span> src<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"</span>></span><span><span></script</span>></span></span>

を開始します

ライブラリを初期化した後、あなたがしなければならないのは、いくつかの特定の属性を追加することだけです。

基本的なアニメーションを使用するには、data-aos = "animation_name"をHTML要素に追加するだけです。

選択できるアニメーションにはいくつかあります。たとえば、「フェード」、「フェードアップ」、「フェードダウン左」などのフェードアニメーションを追加できます。同様に、「フリップアップ」、「フリップ左」、「スライドダウン」、「スライドライト」などのフリップとスライドのアニメーションを追加することもできます。

最初の例のマークアップ：

bower <span>install aos --save</span>

前のセクションの初期化行に加えて、要素をアニメーション化することは他に何もする必要はありません。

アクション中の上記のコードをご覧ください：

codepenのSitePoint（@sitepoint）のスクロール例でペンアニメーションを参照してください。

AOSデータ属性を使用してアニメーションを構成する

アニメーションの構成に使用できるデータ属性のリストに飛び込みましょう。

データAOSオフセット - この属性を使用して、指定された時間よりも早くアニメーションをトリガーできます。そのデフォルト値は120pxです。

data-aos-duration - この属性を使用して、アニメーションの期間を指定できます。持続時間の値は、50msのステップで50〜3000の間にあります。持続時間はCSSで処理されるため、より小さなステップまたはより広い範囲を使用すると、CSSコードのサイズが不必要に増加しました。この範囲は、ほぼすべてのアニメーションに十分でなければなりません。この属性のデフォルト値は400です

Data-AOS-EASING - この属性を使用して、異なる要素をアニメーション化するタイミング関数を制御できます。考えられる値は次のとおりです。線形、容易さ、および容易なクォートです。 GitHubのプロジェクトのREADMEファイルに受け​​入れられているすべての値のリストを見ることができます。

Data-AOS-DuratureとData-AOS-EASING：
• を使用した例を示します
スクロールの例でペンアニメーションを参照してください - codepenのSitePoint（@sitepoint）による属性。
• 使用できるより多くのデータ属性は次のとおりです
  • Data-AOS-Anchor - この属性は、他の要素の位置に基づいてアニメーションをトリガーする場合に役立ちます。セレクターをその値として受け入れます。デフォルト値はnullです。これは、すべてのアニメーションが要素自身の位置に関してトリガーされることを意味します。
  Data-AOS-Anchor-Placement - デフォルトでは、その上部がウィンドウの下部に到達するとすぐに要素のアニメーションが適用されます。この動作は、Data-AOS-Anchor-Placement属性を使用して変更できます。その価値として、この属性はハイフンによって区切られた2つの単語を受け入れます。たとえば、トップボトム、トップセンター、トップトップに設定できます。中心値と底部の両方の値の両方で、このような組み合わせも可能です。
  data-aos-once - 初めて特定の要素に到達したときにのみアニメーションを再生する必要があるかどうか、または上下にスクロールするたびに制御することもできます。デフォルトでは、要素がビューにスクロールするたびにアニメーションが再生されます。この属性の値をFalseに設定して、要素を一度だけアニメーション化することができます。
  • 以下は、data-aos-annchor-flacement：
  を使用する例です codepenのSitePoint（@sitepoint）による属性IIのペンアニメーションを参照してください。 AOSライブラリの内側の仕組みの探索

  scrollのアニメーションの目的は、

  です。この目的のために、ロジックはJavaScript内に記述されていますが、アニメーションはCSS内で記述されています。この分離により、非常にクリーンで保守可能なワークフローで、プロジェクトのニーズに基づいて独自のアニメーションを作成し、それらを変更することができます。

  ライブラリは、すべての要素とその位置を追跡します。これにより、提供した設定に基づいて、AOSアニメーションクラスを動的に追加または削除できます。たとえば、AOS-Animateクラスは、適用される要素がビューポートから移動するたびに削除されます。ただし、要素がData-aos-onceの値をtrueに設定している場合、AOSの酸化クラスはその特定の要素から削除されず、それにより、要素を視界に導く後続のスクロールイベントでアニメーションが発生しないようにします。

  AOSは、HTMLドキュメントの

  要素に属性のデフォルト値を適用します。たとえば、データ-AOS-EASINGは、400まで容易になり、データ-AOS期間が設定されます。 既に述べたように、ライブラリは50〜3000の範囲でアニメーション期間のみを50msのステップで適用します。これは、デフォルトでは、225msのアニメーション期間を持つことができないことを意味します。ただし、次のようにCSSを使用してその期間を追加できます。
  独自のカスタムアニメーションをAOSに追加することも非常に簡単です。

  data-aos属性セレクターを作成し、カスタムアニメーションの名前に設定してください。

  次に、アニメーション化するプロパティを初期値で追加し、アニメーション化するプロパティの名前に設定された遷移プロパティを追加します。 たとえば、

  アニメーションが

  rotate -c

  と呼ばれ、それが適用される要素が最初に-180度回転するとしましょう。 これがあなたのCSSがどのように見えるべきかです：

  アニメーションの最終段階を設定するには（この例では、これは-180度から0度から0度回転する要素になります）、以前のCSSルールのすぐ下に追加します。

  bower <span>install aos --save</span>

  次に、選択したHTML要素にdata-aos = "rotate-c"を追加すると、ユーザーがその要素を表示するときに時計回りに（-180度から0度）回転します。 上記の方法を使用して、時計回りと反時計回りの両方のカスタムローテーションアニメーションを示すライブデモです：

  を参照してください。 その他の機能

  <span>npm install aos --save</span>

  AOSライブラリは、さらに柔軟でユーザーフレンドリーな他の多くの機能を提供しています。各要素の属性を個別に提供する代わりに、init（）関数にオブジェクトとして渡すことができます。例は次のとおりです。

  特定のデバイスまたは特定の条件でアニメーションを無効にし、その値をモバイル、電話、タブレットなどのデバイスタイプに設定することもできます。または、関数を使用してライブラリを無効にすることもできます。

  ここに、両方の機能を説明する2つの例があります：

  このペンでは、画面が800pxより小さい場合、上記の関数を使用してAOSアニメーションが無効になります。 init（）に加えて、AOSは2つの追加機能も提供します：refresh（）とrefreshhard（）。

  <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
  </span><span><span><span><script</span> src<span>="bower_components/aos/dist/aos.js"</span>></span><span><span></script</span>></span></span>

  REFRESH（）は、すべての要素のオフセットと位置を再計算するために使用されます。 Windowのサイズ変更などのイベントで自動的に呼ばれます

  refreshhard（）は、新しい要素がプログラム的に削除またはDOMに追加されるたびに自動的に呼ばれます。このようにして、ライブラリはAOS要素の配列を更新することができます。配列が更新されると、refreshhard（）もrefresh（）関数をトリガーして、すべてのオフセットを再計算します。

  結論

  このチュートリアルでは、Webページをスクロールまたは下にスクロールまたは下に下に上げているときに要素をアニメーション化するために使用できる

  ライブラリのアニメーションを紹介しました。 依存関係がなく、独自のカスタムアニメーションを作成できるようにすることは、AOSをスクロールするためのライブラリの優れた選択肢にする2つの機能です。 JavaScriptアニメーションに興味がある場合は、パフォーマンスでJSをチェックしてみてください。

  プロジェクトでAOSを試したことがありますか？あなたの経験はどうでしたか？仲間の読者といくつかのヒントを共有してください。

  AOSライブラリを使用して、スクロールアニメーションについて

  FAQ
  プロジェクトにAOSライブラリをインストールするにはどうすればよいですか？
  プロジェクトにAOSライブラリをインストールするには、NPM（ノードパッケージマネージャー）を使用する必要があります。端末を開き、プロジェクトディレクトリに移動します。次に、次のコマンドを入力します。NPMインストールAOS - ゼーブ。このコマンドは、AOSライブラリをインストールし、プロジェクトの依存関係に保存します。インストール後、「AOS」からのインポートAOSを使用してプロジェクトにインポートできます。 aos.init（）;。
  で初期化します。AOSアニメーションをカスタマイズできますか？ AOSライブラリは、アニメーションのカスタマイズに使用できるいくつかのデータ属性を提供します。たとえば、Data-AOS-Durationを使用して、アニメーションの持続時間、Data-AOS-Delayを設定してアニメーションを開始する前に遅延を設定し、Data-AOSオフセットでページの上部から距離を設定することができます。アニメーションは開始する必要があります。
  vue.js？
  を使用してAOSを使用してvue.jsでAOSを使用するには、vue.jsプロジェクトにAOSライブラリをインストールする必要があります。インストール後、vue.jsコンポーネントにインポートし、マウントされたライフサイクルフックで初期化できます。その後、HTMLのAOSデータ属性を使用してアニメーションを適用できます。 React.jsプロジェクトのAOSライブラリ。インストール後、React.jsコンポーネントにインポートし、ComponentDidMountライフサイクルメソッドで初期化できます。その後、JSXのAOSデータ属性を使用してアニメーションを適用できます。これは、擬似要素が実際のDOM要素ではなく、AOSがアニメーションを適用するために使用するJavaScriptによって直接操作できないためです。 AOSに問題がある場合、できることがいくつかあります。まず、AOSライブラリを正しくインストールして初期化したことを確認してください。次に、アニメーションが機能しない可能性のある構文エラーについては、HTMLを確認してください。第三に、ブラウザの開発者ツールを使用して、要素を検査し、AOSクラスが適用されているかどうかを確認します。

  モバイルデバイスでAOSを使用できますか？

  はい、AOSはモバイルデバイスで動作します。ただし、アニメーションはリソース集約型であり、古いデバイスまたはローエンドデバイスではうまく機能しない場合があることに注意してください。必要に応じて、特定のデバイスでAnimationsを無効にするオプションを使用して、AOSライブラリを更新するにはどうすればよいですか？

  AOSライブラリを更新するには、NPMを使用できます。端末を開き、プロジェクトディレクトリに移動し、次のコマンドを入力します。NPM更新AOS。このコマンドは、AOSライブラリを最新バージョンに更新します。

  他のJavaScriptライブラリでAOSを使用できますか？ただし、他のライブラリがAOSアニメーションに干渉しないようにしてください。問題が発生している場合は、他のライブラリを無効にして問題を引き起こしているかどうかを確認してみてください。

  AOSライブラリをアンインストールするにはどうすればよいですか？ NPMを使用します。端末を開き、プロジェクトディレクトリに移動し、次のコマンドを入力します。NPMアンインストールAOS。このコマンドは、プロジェクトからAOSライブラリを削除します。

以上がAOSライブラリで簡単に作られたスクロールアニメーションでクールなスクロールアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。