🐈

スクロールでふわっと表示を簡単に！！ JavaScriptのライブラリAOSの簡単な使い方

2023/03/24に公開

JavaScript

発端：スクロールに合わせて出てくるやつ、一から書いてたけど面倒臭いな、、、

・まずは検索！！
→調べてみると色々あるらしいけど、軽いライブラリで探すとAOSを見つけたので使ってみました

1.CDNを調べて張り付けよう

headタグの中にCSSの記述、bodyタグの一番下などにscriptタグを挿入しましょう

下記をコピペしていただければ大丈夫かとは思いますが念のため公式のページはこちらです。

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
</body>

2.JavaScriptでAOSを初期化する

下記のように先ほど挿入したscriptタグの直下に書いても良いですし、別途JSファイルを作成してタグの中身だけを記載してもどちらでも構いません。

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

3.要素にアニメーションを指定する属性を追加する

<div data-aos="fade-up">...</div>

上記のように指定します。
data-aosの値によってアニメーションが変わります。

4.他のパラメーター一覧

data-aos(アニメーションの種類)

<値>

fade-up : 上方向にフェードイン
fade-down : 下方向にフェードイン
fade-left : 左方向にフェードイン
fade-right : 右方向にフェードイン
zoom-in : ズームイン
zoom-out : ズームアウト
flip-up : 上方向にフリップイン
flip-down : 下方向にフリップイン
flip-left : 左方向にフリップイン
flip-right : 右方向にフリップイン

data-aos-duration(アニメーションの時間)

<例>

<div data-aos="fade-up" data-aos-duration="1000">...</div>

単位はmsになりますので上記の例になりますと1秒かけて上方向にフェードインするという意味になります。

data-aos-delay(アニメーションの遅延)

<例>

<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">...</div>

data-aos-durationと同じく単位はmsになりますので上記の例になりますと
0.5秒遅れて始まり1秒かけて上方向にフェードインするという意味になります。

5.一応当てはめて完成したもの

上記のように実際に使ってみましたが、本当にこれで動くんだな、、、ライブラリすげーと思わされました。

6.JQueryを入れていても使うことができます

JQueryなどとの互換性がないプラグインも多々ありますが、AOSは併用が可能です。

ですがその際には、下記のように書いてください

<script>
    $(document).ready(function() {
      AOS.init();
    });
 </script>

jQueryを使用する場合は、必ず$(document).ready内で初期化するようにしてください。

7.使用してみた感想

正直今まで一から書いてきたのが馬鹿らしく思えるほど簡単で、素早く実装できました。
スクロールの量を取得する必要もなく、アニメーションをつけたい要素のページにおける位置を取得する必要もないというのは非常に楽でありがたかったです。
過去にユーザーのアクションによってページの高さが変わってしまう（MOREのボタンなど）デザインの時に高さの取得がうまくいかないというようなこともあったのですが、このようにライブラリを用いれば、その辺も考える必要があまりないのかなと感じました。