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

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

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

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

• ページ遷移する時にフェードなどのエフェクトを加えるjQueryプラグイン「Animsition」の使い方

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

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

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

• AOS本家
• AOSGitHub

phptemp_aos_180207.zip

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

• 組み込み済みサンプル

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

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

本家、若しくは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>

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

<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）の使い方のAMPページ