
本記事上では、サイトへAOS(Animate On Scroll Library)を活用したスクロールアニメーションの実装方法について、概要からサンプルコード/DEMOページの公開まで掲載させて頂いております。
手順を覚えて頂くことで、誰でも気軽に簡単なアニメーションを実装できるようになります。!
✅ 実装にする方法と手順を身につけられる
✅ 実装に際して間違いやすい箇所を知る
AOS(Animate on scroll library)とは??

AOSに関するコードなどが公開されているページ上で記述されている内容を抜粋しますと以下のようになります。
スクロールしながらページ上の要素をアニメーション化するための小さなライブラリ
AOSを使用すると、上下にスクロールしながら要素をアニメーション化できます。上にスクロールして戻ると、要素は前の状態にアニメーション化され、下にスクロールすると再びアニメーション化できるようになります。
特徴
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>
実際に動きを確認してみる

ここまで作業お疲れ様でした。
実際に動作を確認してみましょう!
なんかおかしい点がある場合は、これまでのコード見直してみてください!
また、完成品のDEMOを載せておきますので、参考にしてみてくださいね。
まとめ
⇨ スクロールアニメーションをサイトに実装できるライブラリである
⇨ aos.cssとaos.jsを読み込みつつ、if (!window.Cypress) AOS.init();の記述が必要になる
⇨ 定義しなくてはならないclass属性があるため、注意
コメント