HTML、CSS、AOS.js を使用してスクロールにアニメーションを追加する

AOS.js(ScrollAnimation)はアニメーションを提供するJavaScriptライブラリで、任意のdivタグ内のクラス名を変更するだけで簡単に追加できますアニメーションを追加するためのアニメーションの。さまざまなアニメーション JavaScript ライブラリがありますが、おそらく AOS.js が最も単純です。

このチュートリアルでは、さまざまな例を使用して、AOS.js で使用できるさまざまなタイプのアニメーションを調べます。

最初に説明するアニメーションの種類は、フェード アニメーションです。これを行う前に、まず aos.css と aos.js がコード内で利用可能であり、CDN リンク経由で取得できることを確認する必要があります。

次のコード スニペットを HTML コードの

タグの最後に貼り付けるだけです。 リーリー

上記のコード スニペットは、css ファイルを取得するのに役立ちます。js ファイルを取得するには、以下に示すように CDN コード スニペットをファイルの最後に貼り付ける必要があります。 HTML コード内の body タグ。

リーリー

上記の 2 つのコード スニペットを HTML コードに追加すると、コード内で AOS を使用できるようになります。

AOS.js フェード アニメーションを使用する

フェードインおよびフェードアウト アニメーションは、フェードインおよびフェードアウトの動作をシミュレートし、合計 8 つの異なるアニメーションを実現できます。これらは -＃＃＃

• フェードインとフェードアウト

• フェードインとフェードアウト

• 左にフェードします

• 右にフェードアウト

• 左にフェードします

• 右にフェードアウト

• 左にフェードします

• 左にフェードします

それでは、簡単な HTML-CSS の例で 1 つずつ使用してみましょう。

以下のコード スニペットは、上記のすべてのフェード アニメーションに変更を加える唯一の部分です。

リーリー

上記のコードでは、値を「フェードアップ」として

data-aos 属性に渡します。すべてのフェードの場合、この値のみが変更されます。

index.html

ここで、

「フェードアウト」 アニメーションを実行する次の index.html ファイルについて考えてみましょう。 ＃＃＃例＃＃＃ リーリー

上記のコードをブラウザで実行すると、「Something Up!」というテキストを含む

div

がフェード アニメーションとともに上向きに表示されるはずです。

同様に、フェード

アニメーションを実行したい場合は、以下のコード スニペットに示すアニメーションを使用できます。

リーリー フェード アニメーションを取得するには、index.html ファイル内の div を上記の div に置き換えるだけです。

Fade to the left

の場合、コード スニペットは次のようになります。

リーリー フェードの場合、

コード スニペットは次のとおりです。

リーリー フェードアップ左の場合、

コード スニペットを以下に示します。

リーリー フェードアップ右の場合、

コード スニペットを以下に示します。

リーリー フェード左

の場合、コード スニペットは次のようになります。

リーリー #Fade-down-right の場合、コード スニペットを以下に示します。

リーリー

この時点で、AOS のフェード アニメーションが完了したと結論付けることができます。 AOS.js 反転アニメーションを使用する

フリップ アニメーションは反転動作をシミュレートし、合計 4 つの異なるアニメーションを実現できます。これらは -＃＃＃

ターン中

＃＃＃＃＃＃断る＃＃＃＃＃＃

• 左に反転
  ＃＃＃＃＃＃右折＃＃＃＃＃＃
• それでは、簡単な HTML-CSS の例で 1 つずつ使用してみましょう。
  index.html
• 次の

  index.html

  ファイルについて考えてみましょう。このファイルでは
「フリップアップ」
• アニメーションを実行します。

  リーリー

  上記のコードをブラウザで実行すると、「Flip Up!」というテキストを含む
div

が表示されるはずです。上方向にフリップアニメーションとともに表示されます。

同様に、フリップダウン アニメーションを実行したい場合は、以下のコード スニペットに示すアニメーションを使用できます。

リーリー

左反転の場合、コード スニペットは次のとおりです。 リーリー 右反転

の場合、コード スニペットは次のとおりです。

リーリー AOS.js スケーリング アニメーションの使用

ズーム アニメーションはズーム動作をシミュレートし、合計 8 つの異なるアニメーションを実現できます。これらは -＃＃＃

拡大

拡大 ＃＃＃ズーム＃＃＃

左にズーム

右にズーム ＃＃＃ズーム＃＃＃

拡大

＃＃＃ズーム＃＃＃

左にズーム

右にズーム

それでは、簡単な HTML-CSS の例で 1 つずつ使用してみましょう。
index.html
「ズームイン」アニメーションを実行する次の
• index.html
ファイルについて考えてみましょう。
• ＃＃＃例＃＃＃ リーリー
上記のコードをブラウザで実行すると、ズーム アニメーションでテキスト ズームが上向きになった
• div
が表示されるはずです。
同様に、
• ズームイン アニメーション
を実行したい場合は、以下のコード スニペットに示すアニメーションを使用できます。
• リーリー
• zoom
のコード スニペットを以下に示します。

リーリー

左にズーム

の場合、コード スニペットは次のようになります。

リーリー

右にズームの場合、コード スニペットは次のようになります。

<div id="main">
   <div data-aos="zoom-in-right">Zoom in right!</div>
</div>

同样，如果我们想要缩小动画，我们可以使用下面代码片段中显示的。

<div id="main">
   <div data-aos="zoom-out">Zoom out!</div>
</div>

对于放大，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-up">Zoom out up!</div>
</div>

对于缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-down">Zoom out down!</div>
</div>

对于向左缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-left">Zoom out left!</div>
</div>

对于向右缩小，代码片段如下所示。

<div id="main">
   <div data-aos="zoom-out-right">Zoom out right!</div>
</div>

使用 AOS.js 进行多重设置动画

在上面的所有示例中，我们使用的是单个动画，没有其他选项，但 AOS.js 也允许我们使用带有动画的选项。例如，考虑这样的情况：我们想要一个淡入淡出动画，但持续时间为某个时间。

在下面的代码片段中，我们将创建一个带有持续时间的淡入淡出动画。

<div id="main">
   <div data-aos="fade-down" data-aos-duration="3000"></div>>Fade Down With Duration!</div>
</div>

结论

在本教程中，我们演示了如何借助 AOS.js、HTML 和 CSS 创建滚动动画。

以上がHTML、CSS、AOS.js を使用してスクロールにアニメーションを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。