簡単にスクロールアニメーションが設定できるAOS（jQuery不要）

最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。

一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。

今回はJSをほぼ書かずに簡単にスクロールアニメーションが設定できる「AOS（Animate On Scroll Library」をご紹介します。

まずは試しに実装してみたサンプルをご覧ください。

サンプルページ

AOSとは

AOSはAnimate On Scroll Libraryの略です。

公式サイト
github
公式デモサイト

AOSで出来ること

要素を表示させるアニメーションは「Fade」「Flip」「slide」「Zoom」の4種類が用意されています。

これらにタイミングや速度、上下左右の位置、回転の方向を指定できるのでかかなり自由度が高いです。

jQuery不要で動くのですでにコーディング済みのページに依存せずにお手軽に追加できます。

使い方

下記の手順で読込と設定は完了です。

1. 配布されているJSファイルとCSSファイルの２つを読み込み
2. JSの実行
3. 特定の要素に『data-aos』属性を指定する

読み込み方法

githubからでもDownloadできますが、CDNでも配布されていますのでそちらを使うのをオススメします。

<!--「aos」CSSの読込-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">

<!--「aos」JSの読込-->
<script src="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>

実行方法

さらにJSファイルを読み込んだ直後に<script>AOS.init();</script>と記述してAOSを機能させます。

オプションを設定することも可能です。
ここで設定全体共通の設定をしておくと個別にアニメーションスピードを調整する手間が省けます。

<script>
  AOS.init({
    offset: 200,
    duration: 600,
    easing: 'ease-in-sine',
    delay: 100,
  });
 </script>

さらにAOSでは実行を無効化する端末もオプションで選べます。
これはスマホ版ではアニメーションさせたくないなどのときには便利です。
設定は3つのパターン（mobile（phone & tablet）、phone、tabletの3種類）で選べます。

<script>
  AOS.init({
    disable: 'mobile'
  });
</script>

端末だけではなく、画像の幅でも設定可能です。

<script>
  AOS.init({
    disable: window.innerWidth < 1024
  });
</script>

エフェクトのマークアップ

例えば「フェード・イン」しながら表示させたい場合は次のように記述します。

<div data-aos="fade-in">アニメーションさせたいコンテンツ</div>
何をしているかというとHTMLタグにカスタム属性であるdata-aosを設定しています。
これだけで設定完了です。

もちろんフェードイン以外にも様々なエフェクトが設定できます。
指定できるエフェクトは以下のとおりです。

フェード関連の設定

• Fade animations
• fade-in
• 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

その他の設定

AOSではアニメーション以外にも、要素を表示させるタイミングや動かす距離、アンカーポイント、アニメーションの回数など、各種オプションも指定できます。

これらもアニメーション同様にカスタムデータ属性で指定するだけです。

• data-aos-offset
• data-aos-duration
• data-aos-easing
• data-aos-delay
• data-aos-anchor
• data-aos-anchor-placement
• data-aos-once

参考

複数指定する場合は以下のようになります。

<div data-aos="fade-in" data-aos-easing="ease-in-sine" data-aos-once="true">アニメーションさせたいコンテンツ</div>

詳しくはGitHubで紹介されていますのでご確認ください。