AOSは、スクロールと連動して、要素が可視範囲に入ったらアニメーションしながら表示させることができるJavaScriptライブラリです。様々なアニメーションが用意されているので、色んなサイトで活用することができます。
動きについては、公式サイトでご確認いただけます。
AOSの導入手順
ステップ1. ファイルのダウンロードと設置
まずはGitHubからファイルをダウンロードして、以下のファイルをサーバーにアップロードします。
- dist/aos.css
- dist/aos.js
ファイルを設置したら、ファイルを読み込みます。<head>～</head>に以下を追加します。
<link href="dist/aos.css" rel="stylesheet"> <script src="dist/aos.js"></script>
必要なファイルはCDNでも提供されています。
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
ステップ2. HTMLのマークアップ
HTMLでは属性を使ってアニメーションの種類を指定します。
<div data-aos="animation_name">
例えば、フェードインさせたい要素では、以下のように指定します。
<div data-aos="fade-in">フェードイン</div>
指定できるアニメーションの種類は、以下の通り豊富に用意されています。
- fade-in
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
- flip-up
- flip-down
- flip-left
- flip-right
- slide-up
- slide-down
- slide-left
- slide-right
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
また、アニメーションの種類だけでなく、アニメーションの時間や遅延なども属性で指定することができます。
<div data-aos="fade-in" data-aos-offset="120" data-aos-duration="400" data-aos-easing="ease-in-sine" data-aos-delay="0" data-aos-anchor="null" data-aos-anchor-placement="top-bottom" data-aos-once="false">フェードイン</div>
| data-aos | アニメーションの種類 |
| data-aos-offset | アニメーション実行のトリガーとなるオフセット |
| data-aos-duration | アニメーションの時間 |
| data-aos-easing | アニメーションの滑らかさ |
| data-aos-delay | 遅延 |
| data-aos-anchor | オフセットがカウントされるアンカー要素 |
| data-aos-anchor-placement | アニメーションがトリガーされるアンカーの位置 |
| data-aos-once | アニメーション実行を一度のみにする |
ステップ3. AOSの実行
最後にスクリプトを実行すれば完了です。
<script> AOS.init(); </script>
オプションも併せて指定する場合は、以下のように記述します。
<script>
AOS.init({
offset: 200,
duration: 600,
easing: 'ease-in-sine',
delay: 100,
});
</script>
あとがき
非常に豊富なアニメーションを簡単に実装できて良いですね。jQueryにも依存しないので、既存のサイトにも導入しやすいと思います。