aos.js スクロールアニメーション

K's

2020年7月7日 23:22

1. はじめに

『aos.js』はスクロールに連動してアニメーションする『JSプラグイン』です。

今回の完成形です。

画面収録 2020-07-04 7.30.38.mov

デモサイト

2. CDNを読み込む

公式サイト：aos-js.com

GitHub : aos-js-github.com

<!-- index.html -->
<!-- <body>タグの下部に記述 -->

    <script src="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
</body>

3.HTML記述

<!-- index.html -->

   <!-- フェードエフェクト-->
   <div class = "block" data-aos="fade-in">
     Heroku
   </div>
   <div class = "block" data-aos="fade-in">
     fade-in
   </div>
   <div class = "block" data-aos="fade-up">
     fade-up
   </div>
   <div class = "block" data-aos="fade-down">
     fade-down
   </div>
   <div class = "block" data-aos="fade-left">
     fade-left
   </div>
   <div class = "block" data-aos="fade-right">
     fade-right
   </div>
   <div class = "block"data-aos="fade-up-right">
     fade-up-right
   </div>
   <div class = "block" data-aos="fade-up-left">
     fade-up-left
   </div>
   <div class = "block" data-aos="fade-down-right">
     fade-down-right
   </div>
   <div class = "block" data-aos="fade-down-left">
     fade-down-left
   </div>

   <!-- フリップエフェクト -->
   <div class = "block" data-aos="flip-up">
     flip-up
   </div>
   <div class = "block" data-aos="flip-down">
     flip-down
   </div>
   <div class = "block" data-aos="flip-left">
     flip-left
   </div>
   <div class = "block" data-aos="flip-right">
     flip-right
   </div>

   <!-- ズームエフェクト -->
   <div class = "block" data-aos="zoom-in">
     zoom-in
   </div>
   <div class = "block" data-aos="zoom-in-up">
     zoom-in-up
   </div>
   <div class = "block" data-aos="zoom-in-down">
     zoom-in-down
   </div>
   <div class = "block" data-aos="zoom-in-left">
     zoom-in-left
   </div>
   <div class = "block" data-aos="zoom-in-right">
     zoom-in-right
   </div>
   <div class = "block" data-aos="zoom-out">
     zoom-out
   </div>
   <div class = "block" data-aos="zoom-out-up">
     zoom-out-up
   </div>
   <div class = "block" data-aos="zoom-out-down">
     zoom-out-down
   </div>
   <div class = "block" data-aos="zoom-out-left">
     zoom-out-left
   </div>
   <div class = "block" data-aos="zoom-out-right">
     zoom-out-right
   </div>

   <!-- スライドエフェクト -->
   <div class = "block" data-aos="slide-down">
     slide-down
   </div>
   <div class = "block" data-aos="slide-up">
     slide-up
   </div>
   <div class = "block" data-aos="slide-left">
     slide-left
   </div>
   <div class = "block" data-aos="slide-right">
     slide-right
   </div>

4. CSS記述

/* style.css */

.block{
 height: 500px;
 width: 500px;
 background-color: #000;
 color: #fff;
 margin: 200px auto;
 text-align: center;
 line-height: 500px;
 font-size: 50px;
}

5. <script>内にJSを記述

2で記述したCDNの直後に記述する。

   <script src="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
   <script>
     AOS.init({
       offset: 300,       
       duration: 600,               
       easing: 'ease',           
       delay: 50,                        
       once: false,                     
       anchorPlacement: 'top-center',  
     });
    </script>
</body>

・オプション一覧

offset: 300, //アニメーションの距離
duration: 600, //ミリ秒
easing: 'ease', //アニメーションのイージング設定
delay: 50, //アニメーションの遅延
once: false, //アニメーション一回のみかどうか
anchorPlacement: 'top-center', //発火位置指定
// disable: 'mobile', //スマホ、タブレット時無効
// disable: 'tablet', //タブレット時無効
// disable: 'phone' //スマホ時無効

・要素ごとにオプション指定もできる。

<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease"
data-aos-once="false"
data-aos-anchor-placement="top-center" >
</div>

6.最後に

この様になれば完成です。

その他オプションなど気になる方は公式サイトや公式のGitHubをご覧ください。