jQuery非依存のスクロールアニメーションライブラリ「AOS」

はじめに

jQuery非依存でスクロールアニメーションを実装できる「AOS」をご紹介します。
軽量、導入も手軽で、オプションも豊富です。

公式DEMOはこちら

使ってみる

まずダウンロード

こちらから

設置する

CSS、jsの読み込み

パスは適宜変えて下さい。

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

<script src="assets/js/aos.js"></script>

アニメーションの要素を設定

アニメーションさせたい要素に「data-aos=”アニメーションの名前”」を付与します。
下記だと「fade-up」アニメーションになります。

<div data-aos="fade-up"></div>

jsを実行

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

これだけでスクロールアニメーションを実装できます。
その他にもオプションが用意されています。
簡単に下記にまとめてみました。

オプション

内容とデフォルトの設定

オプション名	内容	デフォルトの設定
data-aos-offset	アニメーション発火までの距離設定（px）	120
data-aos-duration	アニメーションの秒数（ms）	400
data-aos-easing	アニメーションのイージング設定	ease
data-aos-delay	アニメーション発火までのディレイ秒数（ms）	0
data-aos-anchor	指定の要素までスクロールした際にアニメーションを発火させる設定	無し
data-aos-anchor-placement	要素のどの位置までスクロールしたらアニメーションを発火させるかの設定	top-bottom
data-aos-once	アニメーションの発火を1回のみにするか否かの設定	false

data-aos-anchor-placementについて

「data-aos-anchor-placement」というオプションは、要素のどの位置までスクロールしたらアニメーションを発火させるかの設定ですが、設定名と内容を下記にまとめてみました。

設定名	内容
top-bottom	要素の上部が画面の下部までスクロールしたら発火 （デフォルトではこれ）
top-center	要素の上部が画面の中央までスクロールしたら発火
top-top	要素の上部が画面の上部までスクロールしたら発火
center-bottom	要素の中央部が画面の下部に来たら発火
center-center	要素の中央部が画面の中央に来たら発火（ど真ん中）
center-top	要素の中央部が画面の上部に来たら発火
bottom-bottom	要素の下部が画面の下部に来たら発火
bottom-center	要素の下部が画面の中央に来たら発火
bottom-top	要素の下部が画面の上部に来たら発火

デモ

デモを何種類か作成しました。
それぞれ上記のオプションを色々と使ってみました。

DEMO

さいごに

単体で動作するうえ、導入もサクッとできるので、ぜひ使って見て下さい。
他にもブレイクポイントでアニメーションしないように設定できたり等、オプションが用意されています。
参考になればと思います。