DigtalBloomStudio

Animate On Scroll(AOS)

top画像
Menu

Animate On Scrollセットアップ

Animate On Scroll使用例

Animate On Scrollオプション設定

複数画像応用

Animate On Scroll
セットアップ

AOS-Animation
スクロールに応じて要素をアニメーションさせるライブラリ

AOS-Animation公式URL aos 
  
  2025/07/02時点 使用する際は、最新版を確認して使用
  CSS
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

  JavaScript
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

Animate On Scroll
使用例

フェード

aos

data-aos="fade-up"で上からフェードイン

  
  HTML
  <img class="aos-img" src="../img/logo/scroll3.jpg" alt="aos" data-aos="fade-up">

data-aos="fade-down"で下からフェードイン

aos

data-aos="fade-right"で右からフェードイン

aos

data-aos="fade-left"で左からフェードイン

aos

data-aos="fade-up-right"で右上からフェードイン

aos

data-aos="fade-up-left"で左上からフェードイン

aos

data-aos="fade-down-right"で右下からフェードイン

aos

data-aos="fade-down-left"で左下からフェードイン

aos

AOS-Animationの種類

種類 説明 コード例
フェードイン フェードで出現 data-aos="fade"
フェードアップ 下からフェードイン data-aos="fade-up"
フェードダウン 上からフェードイン data-aos="fade-down"
フェード左 左からフェードイン data-aos="fade-left"
フェード右 右からフェードイン data-aos="fade-right"
フェードアップ右 右下からフェードイン data-aos="fade-up-right"
フェードアップ左 左下からフェードイン data-aos="fade-up-left"
フェードダウン右 右上からフェードイン data-aos="fade-down-right"
フェードダウン左 左上からフェードイン data-aos="fade-down-left"
フリップアップ 上方向に回転 data-aos="flip-up"
フリップダウン 下方向に回転 data-aos="flip-down"
フリップ左 左回転 data-aos="flip-left"
フリップ右 右回転 data-aos="flip-right"
ズームイン 拡大して表示 data-aos="zoom-in"
ズームインアップ 拡大＋下から data-aos="zoom-in-up"
ズームインダウン 拡大＋上から data-aos="zoom-in-down"
ズームイン左 拡大＋左から data-aos="zoom-in-left"
ズームイン右 拡大＋右から data-aos="zoom-in-right"
ズームアウト 縮小しながら表示 data-aos="zoom-out"
スライドアップ 下からスライド data-aos="slide-up"
スライドダウン 上からスライド data-aos="slide-down"
スライド左 左からスライド data-aos="slide-left"
スライド右 右からスライド data-aos="slide-right"

Animate On Scroll
オプション設定

アニメーションの時間設定

data-aos="fade-down"で下からフェードイン

data-aos-duration="3000"でアニメーションの時間を3秒に設定

aos 
  
  HTML
  <img class="aos-img" src="../img/logo/scroll4.jpg" alt="aos" data-aos="fade-down" data-aos-duration="3000">

アニメーションの時間設定

data-aos="fade-right"で右からフェードイン

data-aos-easing="linear"でアニメーションのイージングをリニアに設定

aos 
  
  HTML
  <img class="aos-img" src="../img/logo/scroll5.jpg" alt="aos" data-aos="fade-right" data-aos-easing="linear" data-aos-duration="3000">
  /* linear: 一定の速度 */
  /* ease-in-out: 開始と終了がゆっくり */
  /* ease: 開始と終了がゆっくり */
  /* ease-in: 開始がゆっくり */
  /* ease-out: 終了がゆっくり */

アニメーションの開始位置

data-aos="fade-left"で左からフェードイン

data-aos-offset="500"

要素がビューポート（画面）の下端
500ピクセル手前に来た時にアニメーションが開始される
デフォルトは通常120ピクセル程度		 用途 コード例
500 要素が画面に入る前
早めにアニメーションを開始したい場合		 data-aos-offset="500"
50 要素がほぼ完全に画面に入ってから
アニメーションを開始したい場合		 data-aos-offset="50"
aos 
  
  HTML
  <img class="aos-img" src="../img/logo/scroll6.jpg" alt="aos" data-aos="fade-left" data-aos-offset="500">

読み込まれてからの開始時間

data-aos="fade-up-right"で右上からフェードイン

data-aos-delay="5000"でアニメーションの開始を5000ミリ秒(5秒)遅らせる

画面が読み込まれてから５秒なのですぐに実行せれている

aos 
  
  HTML
  <img class="aos-img" src="../img/logo/scroll7.jpg" alt="aos" data-aos="fade-up-right" data-aos-delay="5000">

スクロール値で開始時期設定

data-aos="fade-up-left"で左上からフェードイン

data-aos-anchor-placement="top-center"で要素の上端が画面の中央に来た時にアニメーションが開始される

要素を指定位置までスクロールしたら
アニメーションを実行		 用途 コード例
top-bottom 要素の上端が画面の下端に到達したら data-aos-anchor-placement="top-bottom"
top-center 要素の上端が画面の中央に到達したら data-aos-anchor-placement="top-center"
top-top 要素の上端が画面の上端に到達したら data-aos-anchor-placement="top-top"
center-bottom 要素の中央が画面の下端に到達したら data-aos-anchor-placement="center-bottom"
center-center 要素の中央が画面の中央に到達したら data-aos-anchor-placement="center-center"
center-top 要素の中央が画面の上端に到達したら data-aos-anchor-placement="center-top"
bottom-bottom 要素の下端が画面の下端に到達したら data-aos-anchor-placement="bottom-bottom"
bottom-center 要素の下端が画面の中央に到達したら data-aos-anchor-placement="bottom-center"
bottom-top 要素の下端が画面の上端に到達したら data-aos-anchor-placement="bottom-top"
aos 
  
  HTML
  <img class="aos-img" src="../img/logo/scroll8.jpg" alt="aos" data-aos="fade-up-left" data-aos-anchor-placement="top-center">

アニメーションの実行回数

data-aos="fade-down-right"で右下からフェードイン

初期値(false)スクロールのたびに実行

data-aos-once="true"でアニメーションを一度だけ実行

aos 
  
  HTML
  <img class="aos-img" src="../img/logo/scroll9.jpg" alt="aos" data-aos="fade-down-right" data-aos-once="true">

複数画像応用

aos aos aos aos aos aos aos aos aos 
  
  HTML
                                              囲むことですべてにアニメーションを適用
  <div class="aos-multiple" data-aos="fade-up" data-aos-duration="3000">
    <img class="aos-img" src="../img/logo/scroll3.jpg" alt="aos">
    <img class="aos-img" src="../img/logo/scroll4.jpg" alt="aos">
    <img class="aos-img" src="../img/logo/scroll5.jpg" alt="aos">
    <img class="aos-img" src="../img/logo/scroll6.jpg" alt="aos">
    <img class="aos-img" src="../img/logo/scroll7.jpg" alt="aos">
    <img class="aos-img" src="../img/logo/scroll8.jpg" alt="aos">
    <img class="aos-img" src="../img/logo/scroll9.jpg" alt="aos">
    <img class="aos-img" src="../img/logo/scroll10.jpg" alt="aos">
    <img class="aos-img" src="../img/logo/scroll11.jpg" alt="aos">
  </div>
Top