当サイトは旧サイトです。新サイト・新ページは semlaboratory.jp/column/ にアクセスいただきますようよろしくお願いいたします。

HOME > コラム > jQuery/JS Chips > コンテンツを表示させる時にアニメーションをかけることができる「AOS」（Animate On Scroll Library）の使い方

コンテンツを表示させる時にアニメーションをかけることができる「AOS」（Animate On Scroll Library）の使い方

コラム

AOSは、「Animate On Scroll Library」の略で、スクロールしてコンテンツを表示する時に、コンテンツにアニメーションをかけることができるライブラリです。
jQueryは使わず、jsとcssで手軽に実装できてしまいます。
過去に書いたjQueryプラグイン記事「ページ遷移する時にフェードなどのエフェクトを加えるjQueryプラグイン「Animsition」の使い方」とよく似た動作をします。
「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

コンテンツを表示させる時にアニメーションをかけることができる「AOS」（Animate On Scroll Library）の使い方

AOSって何？

AOSは、divで囲まれたコンテンツをスクロールした時などに表示する時、コンテンツにアニメーションをかけることができるライブラリです。
jQueryは使わずjsとcssで実装することができます。
それも、配布されているファイルを読み込むだけで実装することができます。 とても簡単です。

過去に似たような動作をするjQueryプラグインを紹介いたしました。

同じような挙動をするので、サイトのあり方とそれぞれのライブラリの細かいディテーテルのあり方によって選ぶといいと思います。

ということで、早速解説に入りたいと思います。

本家サイト

本家サイトとGitHubです。
どちらでもプラグイン一式をダウンロードして頂けます。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_aos_180207.zip
組み込み済みサンプル

サンプルです。
全ページに適応できるようにjsもcssも共通の読み込みファイルに追記いたしました。

元になるWEBサイトテンプレート（PHP）について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

ポイント
追記した記述と新規のCSSファイル

本家、若しくはGitHubからダウンロードしていただいたフォルダ内から重要なファイルをサーバーにアップしてください。 CSSファイルとJSファイルをアップして読み込んでください。

読み込むべきCSSファイルです。
当サイトで配布しているファイルでは、「/_set/css.php」に記述しています。 

<link href="/css/aos.css" type="text/css" rel="stylesheet" />

読み込むべきJSファイルです。
当サイトで配布しているファイルでは、「/_set/js.php」に記述しています。 

<script type="text/javascript" src="/js/aos.js"></script>
トリガーになるJS記述

必要ファイルを読み込んだら、次にフッターに以下の記述を追記してください。 

<script>
AOS.init();
</script>

当サイトで配布しているファイルでは、「/_set/foot.php」に記述しています。

このトリガー記述にはオプションを指定することができます。
コンテンツ毎にオプションを記述することもできますが、ここで一括指定することも可能となっています。 

<script>
AOS.init({
	offset: 200,
	duration: 600,
	easing: 'ease-in-sine',
	delay: 100,
});
</script>

個別のオプションについては次の項目で解説いたします。
他、端末によって無効化する記述もあるようです。 

<script>
AOS.init({
	disable: 'mobile'
});
</script>

他、ウィンドウの幅に応じて無効化することができるなど、細かい配慮が出来ますが、それらについてはGitHubをご参照ください。

アニメーションをかけるコンテンツへの記述

そして、最後に、アニメーションをかけるコンテンツに以下のような「data-aos="animation-name"」を追記してください。 

<div data-aos="zoom-in-up"></div>

一つ一つの「animation-name」は本家に書かれているので、そちらをご参照ください。
以下のような名称があるので、それが「animation-name」です。

  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left
  • flip-up
  • flip-down
  • flip-left
  • flip-right
  • slide-up
  • slide-down
  • slide-left
  • slide-right
  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right
  • top-bottom
  • top-center
  • top-top
  • center-bottom
  • center-center
  • center-top
  • bottom-bottom
  • bottom-center
  • bottom-top
  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-back
  • ease-out-back
  • ease-in-out-back
  • ease-in-sine
  • ease-out-sine
  • ease-in-out-sine
  • ease-in-quad
  • ease-out-quad
  • ease-in-out-quad
  • ease-in-cubic
  • ease-out-cubic
  • ease-in-out-cubic
  • ease-in-quart
  • ease-out-quart
  • ease-in-out-quart

他、以下のような記述で、個別にオプションを指定することが出来ます。 

<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600"></div>

<div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector"></div>

<div data-aos="fade-up" data-aos-anchor-placement="top-center"></div>

という感じで、GitHubにもありますので、それぞれ適宜組み合わせて調整してみてくださいね。

最後に動作確認

ということで、最後に動作確認です。
まぁ特に難しいことはありませんので、上手くご確認くださいね。

デバイスによっての指定を入れている場合、デバイス毎のチェックも欠かさずに。

その他、補足

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_171030.zip 」です。
締め

いかがでしたでしょうか？

特に難しいわけではないですが、理解しきれないまま使ってしまうと、色んなアニメーションを試すことが出来ないことになりますので、内容もご理解いただきご利用くださいね。

最近は、ちょっとしたオシャレポイントをどうやってつくるか？というのもテーマになりつつあるような気がします。
味気ないサイトには最高のスパイスになると思いますので、是非、使ってみてください。

執筆 : 清水 隼斗

コンテンツを表示させる時にアニメーションをかけることができる「AOS」（Animate On Scroll Library）の使い方の通常ページ