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を動かすための記述です。