AOSを利用してみた

AOSはHTML要素に対してスクロールに連動したエフェクトを実装できるライブラリです。HTML要素に「data-aos」属性を付与することで、フェード・フリップ・ズームなどのアニメーションを指定できます。ここではAOSについて解説していきます。

01: インストール

bash


# 作業ディレクトの作成/移動
$ mkdir JS0501-AOS
$ cd JS0501-AOS

# AOSのインストール
$ npm init
$ npm install aos --save

# サンプルコードを作成する。
$ nano index.html

index.html


<html><head>
  <link rel="stylesheet" href="node_modules/aos/dist/aos.css" />
    <script src="node_modules/aos/dist/aos.js"></script>
</head>
<body>
  <script>
    AOS.init();
  </script>
  <div style="height: 100%" data-aos="fade-up">fade-up</div>
  <div style="height: 100%" data-aos="zoom-in-right">
    zoom-in-right</div>
  <div style="height: 100%" data-aos="slide-left">
    slide-left</div>
</body></html>

02: 動作テスト

ブラウザで作成したindex.htmlにアクセスすることで、文字列が下左右からスクロールするアニメーションを表示できる。