AOSを使っておしゃれなアニメーションを簡単に実装しよう！
「サイトにアニメーションを実装したいけどjsがよくわからない…」という方がいるのではないでしょうか。
実際、私もjsに関してはまだまだ勉強中であり、わからないことの方が多いです。
しかし、ネット上にあるオープンソースのプログラムを利用することで、下記のようなアニメーションを簡単に実装することができます。
今回は、私がよく使うjsのプログラムの1つであるAOSについてお話ししようと思います。
※この記事の中のコードは「”」の記号などの問題でエディタにコピペしてもうまく反映されない可能性があります。その場合は、自分で打ち直すかAOS公式サイトより正しい表記をコピーする等して対応してください。
AOSとは
AOSはスクロールに応じて動作が開始するjsのプログラムで、要素がある場所まで来たらアニメーションが発動する、というような動きを実装することができます。
基本的にはjsの記述は不要で、下記のソースタグをそれぞれ<head>内、</body>の直前に挿入するだけで使うことができます。
【<head>内】
<link href=”https://unpkg.com/aos@2.3.1/dist/aos.css” rel=”stylesheet”>
【</body>の直前】
<script src=”https://unpkg.com/aos@2.3.1/dist/aos.js”></script>
<script> AOS.init(); </script>
参考：AOS公式サイト
AOSの基本的な使い方
AOSはjsを記述しなくても、アニメーションを付けたい要素のタグに属性を付けるだけでアニメーションを実装することができます。
ここでは、アニメーションの種類、アニメーションにかかる時間、アニメーションが発動するまでの時間、の3つの点について解説していきたいと思います。
- アニメーションの種類「data-aos」
- アニメーションにかかる時間「data-aos-duration」
- アニメーションが発動するまでの時間「data-aos-delay」
アニメーションの種類「data-aos」
どのようなアニメーションかを定義する属性です。
それぞれ要素のタグに「<element data-aos=”○○”>」と設定すれば実装可能です。
ここでは公式サイトを基に、以下の3つを簡単に紹介します。
- FADE
- FLIP
- ZOOM
FADE
data-aos=”fade-up”
文字通り要素がフェードインしてくるようなアニメーションです。
上記「”fade-up”」の他に、「”fade-down”」「”fade-right”」「”fade-left”」の三方向、さらにこれらを組み合わせた斜め方向の「”fade-up-right”」などがあります。
| fade-down | fade-right | fade-left | fade-up-right |
|
|
|
|
FLIP
data-aos=”flip-up”
要素が回転して表示されるアニメーションです。
上記「”flip-up”」の他、「”flip-down”」「”flip-right”」「”flip-left”」などがあります。
| flip-down | flip-right | flip-left |
|
|
|
ZOOM
data-aos=”zoom-in”
要素がズームイン、ズームアウトするアニメーションです。
奥行を指定する「”in”」「”out”」に、「”up”」「”down”」「”left”」「”right”」の四方向を指定して使用します。
「”zoom-right”」など方向の指定のみではズームするアニメーションがつかないので、「”zoom-in-right”」など、必ず奥行きの指定をしなければならない点に注意が必要です。
なお、「”zoom-in”」「”zoom-out”」は、それぞれズームイン、ズームアウトの動作を実行します。
| zoom-out | zoom-in-right | zoom-out-down |
|
|
|
アニメーションにかかる時間「data-aos-duration」
data-aos=”flip-up” data-aos-duration=”1500″
アニメーションにかかる時間を変更したい場合は「<element data-aos-duration=”○○（ミリ秒）”>」と設定すれば実装できます。
例えば上記画像の場合だと、「data-aos=”flip-up” data-aos-duration=”1500″」なので、「flip-up」の開始から終了まで1,500ミリ秒=1.5秒かかる指定になります。
私が実装する場合は、初期状態では少し早く感じるためdata-aos-durationには500か1000を指定することが多いです。
【data-aos-duration※flip-upで比較】
| ※指定なし（0秒） | “1000”（1.0秒） | “2000”（2.0秒） |
|
|
|
アニメーションが発動するまでの時間「data-aos-delay」
data-aos=”zoom-in” data-aos-delay=”2000″
AOSのアニメーションは通常だと要素が画像に現れた時点で動作を開始しますが、「<element data-aos-delay=”○○（ミリ秒）”>」を使えばアニメーション発動までの時間を遅くすることができます。
上記画像の場合「data-aos=”zoom-in” data-aos-delay=”2000″」と指定しているので、画像要素が画面上に現れてから2,000ミリ秒=2.0秒後に「”zoom-in”」の動作を開始します。
私の場合は、横並びの要素を順番に表示させたいときなどに使用することが多いです。
【data-aos-delay※zoom-inで比較】
| ※指定なし（0秒後） | “500”（0.5秒後） | “1000”（1.0秒後） |
|
|
|
AOSを使ってサイトにアニメーションを実装しよう！
簡単にアニメーションが実装できるプログラム「AOS」について説明しました。
<head>内や</body>の直前に少しソースを追加するだけでアニメーションが簡単に実装でき、動作の種類や所要時間、開始までの時間なども属性の追加で簡単に指定することができます。
さらに、上記の「data-aos」「data-aos-duration」「data-aos-delay」は組み合わせることが可能なので、希望に応じてある程度柔軟な対応も可能です。
data-aos=”fade-up” data-aos-duration=”1500″ data-aos-delay=”1000″
AOSを使って、サイトにおしゃれなアニメーションを実装してみてください。
※この記事の中のコードは「”」の記号などの問題でエディタにコピペしてもうまく反映されない可能性があります。その場合は、自分で打ち直すかAOS公式サイトより正しい表記をコピーする等して対応してください。
人気記事
新着記事
カテゴリー
-
ナレッジ -
コラム
