お疲れさまです。みやもとです。
昨年の技術書典にて、「ファンサイト作りで学ぶWeb開発の基本～推し活を楽しみながらスキルアップ～」という本を購入しました。
読みながら実際にファンサイトを作ってみるのがめちゃくちゃ楽しかったのでそれはまた別途記事にしたいのですが、残念ながら技術寄りのところとはまた違う話になりそうなので別のところで書く予定です。
ここでは本に出てきたツールとか技術とか、私が本で初めて見たり使ったりしたものについてちょっとだけ調べて書きたいと思います。
ということで、今回はAOSのアトリビュートについて。
AOSとは
Animate On Scrollという、要素のスクロールをトリガにしてアニメーションを適用するためのJavaScriptライブラリです。
アトリビュート
ひとまず公式GitHubのREADMEに記載されている例について調べてみました。
READMEの「How to use it? 2.Set animation using data-aos attribute:」部分から
<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
>
</div>
| Attribute | 内容 |
|---|---|
| data-aos | アニメーションの種類 |
| data-aos-offset | アニメーションを開始するスクロール量 |
| data-aos-delay | アニメーションを開始するまでの時間 |
| data-aos-duration | アニメーションの再生にかける時間 |
| data-aos-easing | アニメーションの再生速度の変化 |
| data-aos-mirror | 対象がスクロールで画面から 外れた後再び表示された時、 アニメーションを再生するかどうか |
| data-aos-once | 対象が画面に入った最初の１回だけ アニメーションを表示するかどうか |
| data-aos-anchor-placement | 対象が画面のどの位置に来た時に アニメーションを開始するか |
記事を書くにあたりある程度はテストページを使って確認したのですが、mirrorだけ上手く確認できませんでした。
「対象の要素を一度スクロールで通り過ぎて戻った時にアニメーションを再度再生するかどうか」ということかと思ったのですが、mirrorとonceでどう違うのかと比べてみたところ先述の指定に関連するのはonceの方だけでmirrorは特に影響しませんでした。
アニメーション種類
| 名前 | 内容 |
|---|---|
| fade | 表示が薄い→濃いに変化する 上下左右斜め方向の指定が可能 |
| flip | 平面から回転動作を経て表示する 上下左右方向の指定が必要 |
| slide | 指定の方向にスライドで表示される 上下左右の指定が必要 |
| zoom | ズーム動作を経て表示する ズームイン・ズームアウトと 上下左右の指定が可能 |
アンカー指定
指定方法は「top-center」のように縦位置を2つ指定する形で、どちらかに対象が到達した時点でアニメーションが開始します。
「top-top」等、同じ位置を2回指定しているものはその位置以外からアニメーションを開始しないようです。
イージング制御
基本の指定は以下5種類です。
| 名前 | 内容 |
|---|---|
| liner | 一定の速度で動作する |
| ease | 開始と終了がゆっくりになる |
| ease-in | 開始がゆっくりになる |
| ease-out | 終了がゆっくりになる |
| ease-in-out | 開始と終了がゆっくりになる |
easeとease-in-outの違いは後者の方がより緩やからしいです。
目視だといまいちわかりませんでしたが言われてみれば気持ち違うかも？ぐらいの感じでした。
上記のうち「ease-in」「ease-out」「ease-in-out」にはさらに種類があります。
以下の指定はいずれかひとつをハイフン付きで末尾につける形で指定可能です。
| 名前 | 内容 |
|---|---|
| back | 開始時に少し後退する |
| sine | サイン波に基づいて滑らかに加速する |
| quad | 二次関数に基づいて加速を少し強調する |
| cubic | 三次関数に基づいて加速をquadより強調する |
| quart | 四次関数に基づいて加速を最も強調する |
正直なところback以外は目視でさっぱり動きの違いがわかりませんでした。
以前にスライドで使ったイラストをslide-upで表示するように書いたのですが、カスタムでもっと複雑な制御をするとか、別の指定でないと効果の違いを実感しにくいのかもしれません。