文章をスーッと出したい、それAOSの出番です。
ひさーーーーーーーーしぶりに、クラスの授業で企業さまのグループ制作をすることになりました。
で、ヒアリングの時に「スクロールしていくと、こうやって文章がスーッと表示される感じで・・・」という表現があり、厳密に言うとちょっと違うけど、AOSでやったら近い感じになるのでは？と思ったので、ここにメモしておくよ。
AOSってなあに？
AOS（Animate On Scroll）は、スクロールにあわせて、要素がスライドして出てきたりするアニメーションを、誰でも使えるように「JavaScriptとCSSがセットになっているもの（ライブラリ）」です。
AOSは、Michał Sajnóg（ミハウ・サイノグ）さんという、ポーランドのフロントエンドエンジニアさんが作ってくれました。
しかもオープンソース（誰でも無料で使える＆中身を見ることもできる）のライブラリ（お道具箱）です。
ありがたく使わせていただきましょう。
元サイトはこちら⇒ AOS – Animate on scroll library
使い方
①AOSのCSSを読み込む
HTMLのほうにまずAOSのCSSを読み込む
＜head＞から＜／head＞の間にAOSのCSSを読み込むジュモンを入れる。
<!-- AODのCSS読込み -->
<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet">AOSのCSSファイル「aos.css」は見た目の動き用
あとはAOSのJavaScriptファイル「aos.js」は動かすためのもの、この2つが必要になります。
②AOSのJavaScriptを読み込む
AOSのCSSを読み込んだ後に、AOSのJavaScriptのジュモンを入れる（たいていは＜/body＞の直前）
<!-- AOSを読み込み -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<!-- AOSを初期化 -->
<script>
AOS.init();
</script>③アニメーションさせたいHTMLに「おまじない」を書く
アニメーションをつけたい要素に「data-aos=”●●“」を追加
●●の部分はアニメーションの種類だよ。
<div data-aos="fade-up">下からふわっと出てくるよ～</div>どんな動きをするか（アニメの種類）を下に書いておくよ
▼ その場でふわっとフェードインの動き「data-aos=”●●”」
| アニメの種類 | 書き方 | 効果（スクロール時） |
| フェードイン（ふわっと） | fade-in | 透明→表示 |
▼ フェードイン系の動き「data-aos=”●●”」
| アニメの種類 | 書き方 | 効果（スクロール時） |
| 下から上がるように出る | fade-up | 下からふわっと表示 |
| 上から下がるように出る | fade-down | 上からふわっと表示 |
| 左から右に行くように出る | fade-right | 左からふわっと表示 |
| 右から左に行くように出る | fade-left | 右からふわっと表示 |
| 左下から、斜め右上に向かうように出る | fade-up-right | 左下からふわっと表示 |
| 右下から、斜め左上に向かうように出る | fade-up-left | 右下からふわっと表示 |
| 左上から、斜め右下に向かうように出る | fade-down-right | 左上からふわっと表示 |
| 右上から、斜め左下に向かうように出る | fade-down-left | 右上からふわっと表示 |
▼ フリップ系の動き「data-aos=”●●”」
| アニメの種類 | 書き方 | 効果（スクロール時） |
| フリップ | flip-left | 横に回転しながら表示 |
| フリップ | flip-right | 横に回転しながら表示 |
| フリップ | flip-up | 上下に回転しながら表示 |
| フリップ | flip-down | 上下に回転しながら表示 |
（動きが速くて、自分には、どっちまわりか見えん・・・動体視力無）
▼ ズームイン・アウト系の動き「data-aos=”●●”」
| アニメの種類 | 書き方 | 効果（スクロール時） |
| ズームイン | zoom-in | 拡大しながら表示 |
| ズームインしながら上に | zoom-in-up | 拡大しながら上に表示 |
| ズームインしながら下に | zoom-in-down | 拡大しながら下に表示 |
| ズームインしながら左に | zoom-in-left | 拡大しながら左に広がる |
| ズームインしながら右に | zoom-in-right | 拡大しながら右に広がる |
| ズームアウト | zoom-out | 縮小しながら表示 |
| ズームアウトしながら上に | zoom-out-up | 縮小しながら上に表示 |
| ズームアウトしながら下に | zoom-out-down | 縮小しながら下に表示 |
| ズームアウトしながら右に | zoom-out-right | 縮小しながら右に表示 |
| ズームアウトしながら左に | zoom-out-left | 縮小しながら左に表示 |
ちょっとだけカスタマイズ
アニメーション「data-aos=”●●”」のほかにも、設定できるものを一覧にしてみたよ。好みで設定してみてください。
| 属性名 | 初期値 | 意味・効果 | 補足 |
| data-aos-duration | “400” | アニメの時間（ミリ秒） | 1000(1秒)。50ミリ秒(ms)刻みで3000まで指定できる |
| data-aos-delay | “0” | アニメを始めるまでの待ち時間（ミリ秒） | 0～3000まで50ミリ秒(ms)刻みで指定できる |
| data-aos-offset | “120” | アニメが始まるスクロール位置（px） | 数字が120（標準）、大きいほど遅れて出現 |
| data-aos-easing | “ease” | 動き方（速さの変化の感じ） | ease, ease-in, ease-out, ease-in-out |
| data-aos-anchor | スクロールの基準となる要素を指定。初期値は設定無 | IDや.class で指定可能。例 “#header” | |
| data-aos-anchor-placement | “top-bottom” | 要素が画面のどの位置に来たときにアニメを開始するか | “top-bottom”, “center-bottom”, “bottom-bottom” など |
| data-aos-once | “false” | 一度だけアニメする(繰り返さない） | “true” (1回だけ)または “false”(初期値：繰り返す) |
| data-aos-mirror | “false” | 戻るときもアニメするか？ | “true” でスクロール戻し時にも再生。 “false”(初期値)一度だけ表示されて、それ以降は再アニメなし |
▼ 実際に組み込んでみました。少しゆっくりにしています。
その場でふわっとフェードインの動き
<div data-aos="fade"></div>フェードイン系の動き
<div data-aos="fade-up"></div><div data-aos="fade-down"></div><div data-aos="fade-right"></div><div data-aos="fade-left"></div><divdata-aos="fade-up-right"></div><div data-aos="fade-up-left"></div><div data-aos="fade-down-right"></div><div data-aos="fade-down-left"></div>フリップ系の動き
<div data-aos="flip-left"></div><div data-aos="flip-right"></div><div data-aos="flip-up"></div><div data-aos="flip-down"></div>ズームイン・アウト系の動き
<div data-aos="zoom-in"></div><div data-aos="zoom-in-up"></div><div data-aos="zoom-in-down"></div><div data-aos="zoom-in-left"></div><div data-aos="zoom-in-right"></div><div data-aos="zoom-out"></div><div data-aos="zoom-out-up"></div><div data-aos="zoom-out-down"></div><div data-aos="zoom-out-right"></div><div data-aos="zoom-out-left"></div>
