スクロールアニメーションを行う場合、jQueryを絡めて使うことが個人的に多いのですが、LPのシングルページにわざわざjQueryを読み込ませるのはサイト自体のサイズも多少増えてしまうので、その場合はAOSという超便利なJavaScriptのライブラリを使っています。
この記事は、
jQueryなしでスクロールアニメーションさせたい・・。
このような悩みを持つ方へ、JavaScriptを色々と書く必要がなく、簡単に実装ができてしまうJavaScriptライブラリAOSについて解説していきます。
目次
AOSとは？
AOSは、Animate On Scroll Libraryの頭文字をとった略称でJavaScriptのライブラリです。
AOSの特徴は、ざっくりながら以下の3点です。
- jQuery不要
- HTMLに簡単なパラメータ付与アニメーションが可能
- CSSとJSのファイルを併せても約40KB程度と軽量
- JavaScriptの記述がほぼなしで使える
で、特にjQuery不要で使えるのは非常に嬉しいところです。
公式サイト AOS
このように、JavaScriptだけでできるのがメリットです。
もしもjQueryを使っていて、似たようなアニメーションプラグインを探している場合は、同じようなアニメーションを以下の記事で紹介しているので、jQueryの場合はこちらの記事をご覧ください。
関連記事 jQueryのコピペでできるスクロールでふわっとフェードインさせるスニペット
デザインサンプル
早速ですが、AOSのデザインサンプルです。
アニメーションは色々設定できるのですが、ベーシックなフェードインのサンプルです。
下から上にふわっと
このサンプルではしてませんが、フェードインのアニメーションにディレイをかけたり色々できます。
実装の方法と手順
AOSの実装の方法と手順について順に解説していきます。全部で3つのステップの簡単仕様です。
まずは、AOSのファイル一式を公式サイトからダウンロードして設置します。
ですが、CDNでも配信されているのでお手軽・簡単な以下のCDNでの記述がオススメです。その場合、以下のコード2種をHTMLの<head>〜</head>内に記述しましょう。
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>次にAOSの初期化コードを同じくHTMLに記述します。
記述する位置はどこに書いてもAOSは動きますが、自分はSTEP.1で記述したCDNコードのすぐ下に記述しています。
<script>
AOS.init();
</script>ここまでで大枠の準備は完了です。
準備が完了したら、スクロールアニメーションをさせたい要素にdata-aos=”アニメーション名” を記述するだけでOKです。
例えば、以下のような書き方です。
<div data-aos="fade-up"></div>非常に簡単で、上記の例のfade-up がアニメーションになるので、ここを色々書き替えればOKです。
ふわっとフェードインするアニメーション
よく使いそうなフェードイン系のアニメーションですが、以下のようにベーシックなものだけでも8つのパターンがあります。
- 下から上にふわっと
- 上から下にふわっと
- 左から右にふわっと
- 右から左にふわっと
- 左下から上がるようにふわっと
- 右下から上がるようにふわっと
- 左上から落ちてくるようにふわっと
- 右上から落ちてくるようにふわっと
これに加えてディレイなどもかけることができますが、これら8つのベーシックなものをサンプルと共にコードを記載しておきます。
下から上にふわっと
data-aos="fade-up"上から下にふわっと
data-aos="fade-down"左から右にふわっと
data-aos="fade-right"右から左にふわっと
data-aos="fade-left"左下から上がるようにふわっと
data-aos="fade-up-right"右下から上がるようにふわっと
data-aos="fade-up-left"左上から落ちてくるようにふわっと
data-aos="fade-down-right"右上から落ちてくるようにふわっと
data-aos="fade-down-left"フェードイン以外のフリップ・ズームのアニメーション
フェードインのもの以外にも、以下の2種類がベーシックなものであります。
- フリップ … くるっと回転する
- ズーム … 徐々に等倍に縮小される
これらも全部記載すると、すごい量になってしまうので、それぞれ1個ずつサンプルで記載します。
これ以外のサンプルも、公式サイトにあるので気になった方は以下で参照ください。
公式サイト AOS
くるっと回転して表示
data-aos="flip-left"ズームインして表示
data-aos="zoom-in"
