AOS.jsとは

スクロールの動きに合わせてアニメーションを実装することができる拡張機能。

実装

今回はCDNを使用して実装していきます。

1.CDNを読み込むためのコードを記述

コードが変わっている場合があるので、公式を参考にしてください。
AOS.js公式

html

<!-- CSS読み込み -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<!-- js読み込み -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

これだけで実装できます。

使い方

1.HTMLでアニメーションを設定したい要素に属性を追加する

アニメーションを設定したい要素の属性に、アニメーションのタイプを設定するだけです。

記述例

<div data-aos="fade">
    アニメーションを起こしたい
</div>

下記４つの基本的なアニメーションがあります。

Fade　フェードイン
Flip　回転して表示
Slide　スライドしながら表示
Zoom　ズーム

他にも、左からスライドする、右からスライドするなどがあります。
AOS公式ページに紹介されているので確認して使ってみてください。

JavascriptでAOS.jsを動作させるためのプログラムを記述する

<script>
AOS.init();
</script>

これだけで動作します。
AOSを動かすための記述です。

参考資料