Learning site for website creation

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>