スクロールでアニメーションしながらHTML要素を表示する「AOS」の使い方

公開日: 2018年4月14日 最終更新日: 2018年4月17日

AOSは、jQuery不要で動くスクロールアクション系javascriptプラグインです。
スクロールでHTML要素がウィンドウ内に入ると、フェードインして現れるエフェクトを実現できます。

jQuery不要でしかも動作が軽いので、とても使いやすいです。

ページ速度を重視しながらアニメーションを実装したい場合に、ぜひとも採用したいJSです。

そんなAOSの使い方を、より解りやすく説明していきたいと思います!

AOSダウンロードと読み込み方法

https://michalsnik.github.io/aos/

ページの下の方にダウンロードリンクがあります。
ダウンロードしたcssとjsファイルをそれぞれ所定の場所で読み込みます。

CDNでも提供されているので、お好きな方を選んでください。

AOSのセッティング

AOSを初期化するjsを書きます。たった1行でおk!

アニメーションさせたい要素には、この様にdata-aos属性を加えます。

data-aos属性の値には「アニメーション名称」が入ります。

data-aosの値一覧

フェード

  • fade
  • 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

data-aos属性一覧と各種説明

アニメーション名称の他に、トリガーやタイミングの調整など設定することができます。

それぞれの説明は次の表にまとめました。

属性名 概要 入力例 デフォルト値
data-aos-offset 要素から見た位置にトリガーを指定(px)します。 200 120
data-aos-duration アニメーション時間をミリ秒単位で指定します。 600 400
data-aos-easing easingを指定します。 ease-in-sine ease
data-aos-delay アニメーションをミリ秒単位で遅らせます。 300 0
data-aos-anchor 指定した要素がトリガーになります。 #selector null
data-aos-anchor-placement “要素の位置-ウィンドウ位置”がトリガーになります。 top-center top-bottom
data-aos-once アニメーションを1回のみにする場合trueを指定します。 true false

data-aos-anchordata-aos-anchor-placementの2つは少し分かり辛いので、図解と共にもっと詳しく説明します。

data-aos-anchorの詳細

デフォルトでは、data-aosを加えたHTML要素がウィンドウ内に入った時に動く設定になっています。

data-aos-anchorは、指定したセレクタをトリガーにしてアニメーションが始まります。

data-aos-anchor-placementの詳細

data-aos-anchor-placementでは、トリガーの位置を細かく指定できます。

デフォルトの値は”top-bottom“となっており【要素のtopがウィンドウのbottomを過ぎたらトリガー】という意味になります。
“要素の位置-ウィンドウ位置”という書き方になりますね。

data-aos-anchor-placement="center-center"の場合は、この図のようになります。

data-aos-anchor-placementの値一覧

  • top-bottom
  • top-center
  • top-top
  • center-bottom
  • center-center
  • center-top
  • bottom-bottom
  • bottom-center
  • bottom-top

data-aos-easingの値一覧

data-aos-easingに入れる値は下記の通りです。

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-back
  • ease-out-back
  • ease-in-out-back
  • ease-in-sine
  • ease-out-sine
  • ease-in-out-sine
  • ease-in-quad
  • ease-out-quad
  • ease-in-out-quad
  • ease-in-cubic
  • ease-out-cubic
  • ease-in-out-cubic
  • ease-in-quart
  • ease-out-quart
  • ease-in-out-quart

AOSのデモを見てみよう

各種セッティングを施したデモページを作成しました。
設定のちょっとした説明も入れてAOSを実装していますので、ご参考までにどうぞ!

AOSのデモページ

AOSの使用例

AOSを使ったアニメーションの実装事例です。

先日ツイッターで流れてきて衝撃を受けたやつw

まとめ

いかがでしたでしょうか?
なるべく解りやすくAOSの使い方を紹介してきました。

スクロールアクション系のJSの中でも、とにかく動作が軽いので個人的にとても気に入っています。

AOSを使ってこれからどんなページを作ろうか、色々考えていきたいと思いまーす。