AOSの使い方 : オシャレなスクロールアニメーションをサイトに実装する

本記事上では、サイトへAOS(Animate On Scroll Library)を活用したスクロールアニメーションの実装方法について、概要からサンプルコード/DEMOページの公開まで掲載させて頂いております。

手順を覚えて頂くことで、誰でも気軽に簡単なアニメーションを実装できるようになります。!

✅   AOS( Animate On Scroll Library )を理解する
✅   実装にする方法と手順を身につけられる
✅   実装に際して間違いやすい箇所を知る

AOS(Animate on scroll library)とは??
1. 特徴
AOSを活用するための環境準備
1. 必要なファイルのダウンロード
2. HTML/CSSファイルの準備
AOSをページに実装
1. aos.cssとaos.jsを読み込む
2. 必要なclassについて理解する
実際に動きを確認してみる
まとめ

AOS(Animate on scroll library)とは??

AOSに関するコードなどが公開されているページ上で記述されている内容を抜粋しますと以下のようになります。

スクロールしながらページ上の要素をアニメーション化するための小さなライブラリ

AOSを使用すると、上下にスクロールしながら要素をアニメーション化できます。上にスクロールして戻ると、要素は前の状態にアニメーション化され、下にスクロールすると再びアニメーション化できるようになります。

特徴

JavaScriptが分らなくてもサイトへ実装が可能
フェードやズームなどを含む豊富なアニメーションが準備されている
PHP, Rubyなどのフレームワークを用いたWeb開発でも用いることができる
最小限のコードでアニメーションを実装できる
アニメーションの遅延やアニメーションの長さなど高度な設定も可能

AOSを活用するための環境準備

では、次にAOSを活用するために必要なファイルのダウンロードとHTML/CSSファイルの準備していきましょう。

必要なファイルのダウンロード

まずは、以下より公式ページにアクセスしましょう。

https://michalsnik.github.io/aos/

公式ページが開けたら、「GET IT」という文字が見えるまでページをスクロールしていきましょう。

「GET IT」という文字が見えたら、その下にDownloadというボタンがあると思いますので、クリックしましょう!

次の画面では、保存場所をデスクトップに指定し、保存ボタンをクリックしましょう。

デスクトップ上で、以下のzipファイルが確認出来たらダウンロード完了です！

zipファイルは、解凍しておきましょう。macの場合は、ダブルクリックすることで解凍ができます。

HTML/CSSファイルの準備

続いて、専用のフォルダと動作の検証用のサンプルのコードを準備していきます。

フォルダについては、デスクトップ上に「aos_sample」という名前で作成し、
aos_sampleフォルダ内にHTMLファイル/CSSファイルを作成しましょう。

コードについては、以下のものを貼り付けてください。

※ ファイル名については、HTMLをaos_sample.html, CSSをaos_sample.cssとします。

<!DOCTYPE html>
<html>  
  <head> 
    <meta charset="UTF-8"> 
    <title>Zoom テスト</title> 
    <link rel="stylesheet" href="aos_sample.css">
  </head>
  <body>
    <header class="common">
      <h1>Scroll ↓</h1>
    </header>
    <main class="common">
      <h2>こちらはメインコンテンツです。</h2>
    </main>
    <footer class="common">
      <h2>こちらはfooterです。</h2>
    </footer>
  </body>
<html>

body, h2 {  
  margin: 0px;
}

.common {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

header {  background-color: aquamarine;
}

main {  background-color: rgb(210, 171, 73);
}

footer {
  background-color: rgb(135, 141, 222);
}

おっと、、ここで忘れてはいけないのがダウンロードしてきたaos関連のファイルですね！

aos_masterフォルダを開くと、以下のようになっていると思います。

distフォルダを見つけたら、コピーして、先程、作成したaos_sampleフォルダに貼り付けましょう！

aos_sampleフォルダ内は、上のようになっていればOKです！

distフォルダ内にaosを実装する上で、必要なaos.cssとaos.jsが入っています。

AOSをページに実装

では、ベースとなるファイルの準備等も終わったので、続いてAOSを実装していく作業に入ります。

aos_sample.htmlを以下のように修正し、aos.cssとaos.jsを読み込みましょう。

aos.cssとaos.jsを読み込む

<!DOCTYPE html>
<html>  
  <head> 
    <meta charset="UTF-8"> 
    <title>Zoom テスト</title>
    <link rel="stylesheet" href="aos_sample.css">
    <!-- aos.cssを読み込み : 追加 -->
    <link href="dist/aos.css" rel="stylesheet">
    <!--                  　　　 -->
  </head>
  <body>
    <header class="common">
      <h1>Scroll ↓</h1>
    </header>
    <main class="common">
      <h2>こちらはメインコンテンツです。</h2>
    </main>
    <footer class="common">
      <h2>こちらはfooterです。</h2>
    </footer>
　　<!-- aos.jsを読み込み : 追加 -->
　　<script src="dist/aos.js"></script>
   <!--               　　　   -->
　　<!-- aosの初期化 : 追加  -->
　　<script>
　　　if (!window.Cypress) AOS.init();
　　</script>
   <!--                   -->
  </body>
<html>

必要なclassについて理解する

aos.cssやaos.jsを読み込めば、動作するのか??と考えると思いますが、実は、aos.css上で定義されているclassを設定してあげないとちゃんと動作は、しません。

必要なclassと定義方法について、みていきましょう。

  <div class="aos-item" data-aos="zoom-in-up">
     <div class="aos-item__inner">
        <!-- ここにアニメーションを適用させたい要素を記述する -->
     </div>
  </div>

<!--  解説   -->
<!-- 
 class="aos-item"  
 :  aosのメインクラス

 data-aos="アニメーションの種類" 

 class="aos-item__inner" 
 : aosのサブクラス (アニメーションを適用させたい要素を囲む要素に定義)
 -->

では、仕上げに上記の追加コードをaos_sample.htmlのbodyタグ内のコードに加えていきましょう。

<body>
<header class="common">  
  <div class="aos-item"data-aos="zoom-in-up">
     <div class="aos-item__inner">
        <h1>Scroll ↓</h1>
     </div>
  </div>
</header>

<main class="common">
  <div class="aos-item" data-aos="zoom-in-right">
     <div class="aos-item__inner">
        <h2>こちらはメインコンテンツです。</h2>
     </div>
  </div>
</main>

<footer class="common">
  <div class="aos-item" data-aos="zoom-in-down">
     <div class="aos-item__inner">
        <h2>こちらはfooterです。</h2>
     </div>
  </div>
</footer>
</body>

最終的なコードは、こちらです。

※ CSSは、最初のままでOKです。

<!DOCTYPE html>
<html>  
  <head> 
    <meta charset="UTF-8"> 
    <title>Zoom テスト</title>
    <link rel="stylesheet" href="aos_sample.css">
    <!-- aos.cssを読み込み -->
    <link href="dist/aos.css" rel="stylesheet">
    <!--                  -->
  </head>
  <body>
    <headerclass="common">  
      <divclass="aos-item"data-aos="zoom-in-up">
        <divclass="aos-item__inner">
           <h1>Scroll ↓</h1>
        </div>
      </div>
    </header>

    <main class="common">
      <div class="aos-item" data-aos="zoom-in-right">
        <div class="aos-item__inner">
           <h2>こちらはメインコンテンツです。</h2>
        </div>
      </div>
    </main>

    <footer class="common">
      <div class="aos-item" data-aos="zoom-in-down">
        <div class="aos-item__inner">
           <h2>こちらはfooterです。</h2>
        </div>
      </div>
    </footer>
　  　<!-- aos.jsを読み込み -->
　　  <script src="dist/aos.js"></script>
     <!--               　-->
　　  <!-- aosの初期化 -->
　　  <script>
　　　  if (!window.Cypress) AOS.init();
　　  </script>
     <!--             -->
  </body>
<html>