面倒なJavaScriptとはおさらば、簡単にスクロールアニメーションが実装できるAOSの使い方を解説

現在web制作において、アニメーションはUXの観点からも重要になっています。

特に、スクロール連動型アニメーションを取り入れているサイトはよく見ますよね。

そんな中、アニメーションの重要性を理解しつつも、実装コストがなぁと感じている方や、やってみたいけど難しそうと思っている方もいると思います。ぶっちゃけ、JavaScriptって一から実装するのは面倒だったりもしますしね。

今回は、効率よくサクッとスクロールアニメーションが実装できるJavaScriptのプラグイン、AOSを紹介します。

アニメーションとUXの関係性

まず初めにここでは、アニメーションとUXの関係について簡単に解説します。

UX (User Experience)とは、人が製品やサービスに触れ、得る体験や経験のことを言います。

例えば、webサイトを訪問した際に、

• 見た目が綺麗
• 動きがかっこいい
• ページ読み込みが早い
• 使っていて楽しい
• 商品の購入までが分かりやすい、早い

などと感じることがあると思います。

これらがUXです。

web制作では、UXを向上させる方法の一つとして、アニメーションの使用があります。

ただアニメーションは適切に使用して初めて効果を得られるものであり、誤った使い方をすると逆効果となります。いたるところでアニメーションを使用し、ゴリゴリ動かしているサイトを見かけますが、サイトも重くなりますし、正直見にくいです。アニメーションはポイントを抑えて使用することに意味があり、たくさん使えばいいというものではありません。

AOSって？

ここで本題のAOSについて解説します。

AOS(Animation On Scroll library)とは、スクロール連動型アニメーションを簡単に実装できるJavaScriptのプラグインです。

スクロール連動型アニメーションとは、スクロールと連動し、対象要素がウィンドウ内に入ったタイミングで、アニメーション表示させるものです。

こちらの「AOS公式サイト」にて、スクロールしてみてください。

誰もが一度は見たことのあるような、アニメーションだと思います。

このスクロールアニメーションを一から実装するのはそこまで大変ではないですが、時間はある程度かかります。「車輪の再発明」という言葉がある通り、すでに存在する技術や解決法を知らずに、同じものを再び一から作ることは時間の無駄です。

AOSはファイルを読み込み、JavaScript数行と、HTML要素にクラスを指定するだけで、スクロールアニメーションを実装することができます。また、軽量であるため、パフォーマンスの観点からも優秀なプラグインです。

aos.jsの使い方

基本的な使い方は、

1. JavaScriptとCSSをHTML内で読み込む
2. アニメーションさせたいHTML要素に「data-aos属性」を指定する
3. JavaScriptを数行記述する

これだけです！

では、順番に見ていきましょう。

JavaScriptとCSSをHTML内で読み込む

まずは、HTML内で読み込む、ファイルをダウンロードします。

ダウンロードは、「AOS公式サイト」の下の方から出来ます。

「aos-master.zip」がダウンロード出来たと思います。このaos-master.zipを解凍し、中身を見てみると以下の構成となっています。

• aos-master/dist/aos.css
• aos-master/dist/aos.js

こちらの2つのファイルが、HTML内で読み込むファイルとなります。

上記のファイルを自身のプロジェクトディレクトリに置き、head内で読み込めば完了となります。もちろんご自身の環境によってパスは変えてくださいね。また本当はjavascriptはbodyの閉じタグの直前で読み込んだほうが良いです。

<link rel="stylesheet" href="css/aos.css">
<script src="js/aos.js"></script>

またCDNを利用することもできます。

以下2行をhead内に記述し、読み込み完了となります。

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

アニメーションさせたいHTML要素に「data-aos属性」を指定する

AOSのアニメーションタイプには「Fade」、「Flip」、「Slide」、「Zoom」の4種類が用意されており、さらにオプションを設定し、タイミングやトリガー、回転、動きなどを指定することが可能です。アニメーションさせたいHTML要素に以下のように「data-aos属性」を指定します。

<div data-aos="fade-right">
  SAMPLE
</div>

JavaScriptを数行記述する

以下のコードを自身のJavaScripファイルに記述し完了です。

AOS.init()

実際にaos.jsを使ってみる

それでは実際に使ってみましょう。

アニメーションタイプ

既に解説した通り、アニメーションさせたいHTML要素に「data-aos=”fade-right”」のように属性を記述し、完了となります。これだけで基本的なスクロールアニメーションの実装ができます！こちらの DEMO1 にて、全タイプ作成しておりますので、参考にどうぞ！

オプション

オプションを指定することで、先程までのアニメーションに詳細設定を加えることが可能になります。各オプション属性をHTML要素に指定します。

<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in">
  SAMPLE
</div>

オプション一覧

「data-aos-easing」、「data-aos-anchor-placement」についてはさらに設定値があります。

data-aos-easing 設定値一覧

「data-aos-easing」は、イージングタイプを指定するためのオプションです。

イージングの動作については、以下のサイトを参考にしてみてください。

data-aos-anchor-placement 設定値一覧

「data-aos-anchor-placement」は、発火位置を細かく設定するためのオプションです。指定のHTML要素の「上部、中央、下部」がウィンドウの「上部、中央、下部」へ来たら発火させるといった設定が可能となります。

こちらの DEMO2 にて、複数タイプ作成しておりますので、参考にどうぞ！

その他の機能

オプションの一括指定

アニメーションさせる全ての要素に対して、同じオプションを一括指定する場合、JavaScript側でオプション値をオブジェクトとして渡します。初期値の設定みたいなものです。

AOS.init({
  offset: 300,
  delay: 100,
  duration: 500,
  easing: 'ease-in’,
  once: true,
});

共通オプションを一括指定することでHTML側の記述量も減りますし、オプションを変更したくなった場合もJavaScriptの1箇所のみ変更するだけで良いので、可読性とメンテナンス性の観点からも推奨します。

指定のデバイスのみアニメーションを無効にする。

「SPのみアニメーションを無効にする」などといったことが可能です。デバイスは「mobile, tablet, phone」の3種類が用意されております。

以下のように、無効にしたいデバイスを指定することで可能となります。

スマホとタブレット時は無効。

AOS.init({
  disable: 'mobile'
});

タブレットのみ無効

AOS.init({
  disable: 'tablet'
});

スマホのみ無効

AOS.init({
  disable: 'phone'
});

残念ながら現在、PCを指定するオプションは用意されておりません。PC時無効にしたい場合は、次項で解説する「画面幅を指定して無効にする」方法を使い無効にします。

画面幅を指定して、アニメーションを無効にする。

デバイス以外に、画面幅を指定し無効にすることも可能です。1000px以下の環境ではアニメーションを無効にします。

AOS.init({
  disable: function () {
 　return window.innerWidth < 1000;
  }
});

AOSのカスタマイズ

AOSでは様々なカスタマイズができる仕組みが用意されています。

それらを使うことでよりおしゃれな動きなんかも実装できます。

アニメーションカスタマイズ

実際に制作を行っていると、AOSにないアニメーションやSPとPCでアニメーションタイプを変更したい場合が出てきます。そういった際に、アニメーションのカスタマイズを行うことが可能です。

難しそうと感じた皆様、安心してください！

JavaScriptを書かずとも、CSSとHTMLだけでアニメーションのカスタマイズが可能です。今回は、SPとPCでアニメーションタイプを変更してみたいと思います。

例1）SP時はシンプルにフェードイン表示させ、PC時は左右100pxの位置からフェードイン表示する。

<div id="custom1">
  <div data-aos="new-animation">
   SAMPLE
  </div>
  <div data-aos="new-animation">
   SAMPLE
  </div>
  <div data-aos="new-animation">
   SAMPLE
  </div>
  <div data-aos="new-animation">
   SAMPLE
  </div>
</div>

#custom1 [data-aos="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;
}
#custom1 [data-aos="new-animation"].aos-animate {
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #custom1 [data-aos="new-animation"]:nth-of-type(odd) {
  　　transform: translateX(-100px);
  }
  #custom1 [data-aos="new-animation"]:nth-of-type(even) {
  　　transform: translateX(100px);
  }
  #custom1 [data-aos="new-animation"].aos-animate {
  　　transform: translateX(0);
  }
}

処理は簡単で、[data-aos=”new-animation”] にアニメーション開始前のスタイル、[data-aos=”new-animation”].aos-animate にアニメーション後のスタイルを記述し完了となります。上記コードの場合、SP時の動作は768px以上でも引き継がれます。複数作成する場合、上記コードを新たに追加し、属性名とアニメーション前後のスタイルを記述します。

例2）SP時はシンプルにフェードインアップ表示させ、PC時は左から順にフェードインアップ表示する。

<div id="custom2">
  <div data-aos="fade-up">
   SAMPLE
  </div>
  <div data-aos="fade-up">
   SAMPLE
  </div>
  <div data-aos="fade-up">
   SAMPLE
  </div>
</div>

@media screen and (min-width: 768px) {
  #custom2 div:nth-of-type(2){
  transition-delay: .1s;
  }
  #custom2 div:nth-of-type(3){
  transition-delay: .2s;
  }
}

カスタムアニメーション2は、既存のフェードインアップのタイミングをPC時のみズラすといった処理なので、カスタムアニメーション1の data-aos=”new-animation” のように、任意の属性値は作成せず、既存のdata-aos=”fade-up”を使用し、CSSでタイミングのみズラしています。

イージングカスタム

アニメーション同様、イージングのカスタムも可能です。

<div data-aos="fade-right" data-aos-easing="new-easing">
  SAMPLE
</div>

[data-aos][data-aos-easing="new-easing"] {
  transition-timing-function: cubic-bezier(.250, .250, .750, .750);
}

タイミングや動作割合を指定するCSSプロパティの「transition-timing-function」を使用します。上記コードは、アニメーション動作を4分割し、各ポイントでスピードを設定しています。複数作成する場合、上記コードを新たに追加し、属性名とtransition-timing-functionを記述します。

デフォルトのアニメーション距離のカスタマイズ (SCSS)

SCSSでの開発を行っている場合、デフォルトのアニメーション距離を変更することが可能です。アニメーション距離とは、移動距離のことで、デフォルトでは１００pxに設定されています。data-aos=”fade-up”の場合、100px下の位置からフェードインしながら上がってきます。この距離は、aos-next/src/sass/aos.scss の $aos-distance: 100px; 箇所にて設定されており、変更する際はこちらを任意の距離に上書きします。

デフォルトのアニメーション距離を200pxに変更。

$aos-distance: 200px;
@import 'node_modules/aos/src/sass/aos.scss';

※$aos-distance: 200px;は、aos.scssをインポートする前に記述しないと反映されないことがあるので注意してください。

なお、アニメーション距離を設定するオプションは用意されておりませんので、変更する際は上記SCSSで行うか、CSSにて自身でカスタムする必要があります。

CSSアニメーションライブラリの統合

AOSは、外部のCSSアニメーションライブラリと統合することも可能です。

Animate.cssライブラリとの統合例

まずは、Animate.cssライブラリを使用するためにCSSをダウンロードします。こちらのAnimate.css公式サイトの「Download Animate.css」からCSSファイルをダウンロードしてください。ダウンロード完了後、AOS同様head内で読み込みます。

<link rel="stylesheet" href="css/animate.css">

これでAnimate.cssを使用する準備が整いました。

では、コードとともに見ていきましょう！

<div data-aos="fadeInUp">
  SAMPLE
</div>

外部のCSSアニメーションライブラリと統合する場合、data-aos属性には統合するCSSアニメーションライブラリのアニメーションタイプを記述します。今回指定している “fadeInUp” はAnimate.cssのアニメーションタイプです。また、ここでdata-aos属性に記述したアニメーションタイプは後にクラスとなります。上記コードの場合、class=”fadeInUp” がスクロールと連動し自動生成されます。Animate.cssのアニメーションタイプは、「公式サイト」から確認することができます。

AOS.init({
  useClassNames: true,
  initClassName: false,
  animatedClassName: 'animated',
});

上記コードは、AOSのデフォルト動作を初期化しています。
外部CSSライブラリと統合する場合、こちらのコードが必要となります。

useClassNames: true,

useClassNamesをtrueにした場合、スクロールと連動し、先ほどdata-aos属性に記述した属性値をクラスとして生成します。

animatedClassName: 'animated',

animatedClassName には、スクロールと連動し、アニメーション要素に付与したいクラス名を指定します。Animate.cssでは、アニメーション要素に「animated」クラスを指定する決まりとなっているので、こちらにはanimatedと記述します。上記コードの場合、アニメーション要素がウィンドウ内に入ったタイミングで、「animated」クラスと「fadeInUp」クラスの2つが自動生成されます。

[data-aos] {
  visibility: hidden;
}

[data-aos].animated {
  visibility: visible;
}

アニメーション前の要素を非表示にします。

外部CSSライブラリを使用すると、アニメーション前の要素が非表示にならないことがありますので、上記コードでアニメーション前の要素を非表示にします。

まとめ

今回は簡単にスクロールアニメーションを実装できるJavaScriptのプラグイン、AOSを紹介しました。オプションやカスタマイズを使うとかなり色々なことができますし、すごく簡単に実装できるので、ぜひ使ってみてください。

参考URL

-Git hub (AOS)
https://github.com/michalsnik/aos

-Git hub (Animate.css)
https://github.com/daneden/animate.css