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

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

さいごに

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