AOS:要素に動きをつける
公開日:2021年03月01日
更新日:2024年10月09日
AOS(Animate On Scroll Library)の使い方。※よく使うものだけ抜粋
公式サイト:https://michalsnik.github.io/aos/
必要なファイルを読み込む
head要素内に以下のコードを追加します。
<!-- AOS用CSS -->
<link href="
https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css
" rel="stylesheet">
</body>の直前に以下のコードを追加します。
<!-- AOS用JavaScript -->
<script src="
https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.js
"></script>
<script>
AOS.init();
</script>
AOSのオプション設定
必要ないオプションは削除できます。削除したオプションは初期値が使われます。
AOS.init({
once:false,
duration: 1000,
easing: 'ease-out',
disable: 'mobile',
});
once
アニメーションの回数を指定する。
- true:アニメーションを1回だけ実行する
- false(初期値):画面を上部に戻して再度下にスクロールすると何度でもアニメーションする
duration
アニメーションの時間をミリ秒で指定する。
- 数値(初期値:400)
easing
動き方を指定します。推奨「ease-out」
イージングについて:https://ics.media/entry/18730/
イージング関数チートシート:https://easings.net/ja
- linear
- ease(初期値)
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart
disable
アニメーションしない端末を指定する。
- false(初期値):すべての端末でアニメーションを実行
- ‘phone’:スマートフォンではアニメーションを実行しない。
- ‘tablet’:タブレットではアニメーションを実行しない。
- ‘mobile’:スマートフォンとタブレットでアニメーションを実行しない。
動きをつけたい要素に属性を追加する
data-aos属性:アニメーション名
動きをつけたい要素にdata-aos属性を追加します。
<div data-aos="fade">
この要素がフェードインします
</div>
フェード系
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-left
- fade-up-right
- fade-down-left
- fade-down-right
フリップ系
- 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
data-aos-duration属性:アニメーション時間をミリ秒単位で指定
アニメーション時間を指定します。
- 初期値:400
<div data-aos="fade" data-aos-duration="1000">
この要素がフェードインします
</div>
data-aos-delay属性:遅延時間を指定
アニメーションを開始するまでの待機時間をミリ秒で指定する。
アニメーション開始位置に到達してからdelayの待機時間が過ぎた後にアニメーションを開始します。
- 初期値:0
<div data-aos="fade" data-aos-delay="200">
この要素がフェードインします
</div>
data-aos-once属性:アニメーションを1回のみにする場合にtrue指定
- 初期値:false
<div data-aos="fade" data-aos-once="false">
この要素がフェードインします
</div>
同じカテゴリーのコンテンツ