模写修行メディア

【超簡単】JavaScriptライブラリaos.jsの使い方を解説!

現在、多くのwebサイトがアニメーションを取り入れています。

特に、スクロール連動型アニメーションを取り入れているサイトは誰でも1度はみたことがあるのではないでしょうか?

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

JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。

JavaScriptの勉強ができるおすすめの本やサイト紹介!

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

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

まず初めに、アニメーションとUXの関係について簡単に紹介します。

UX(User Experience)とは
人が製品やサービスに触れ、得る体験や経験のこと
  • 欲しい情報がすぐに見つかった
  • ページ読み込みが速い
  • 使っていて楽しい
  • 迷うことなくスムーズに商品の購入ができた

例えば、webサイトにアクセスした際、上のようなことを感じることがあります。これらがユーザー体験(UX)です。

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

ただし、アニメーションは適切に使用して初めて効果を得られるものであり、多用しすぎると逆効果になります。

  • 動きが多すぎて見にくい...
  • 動きがゆっくりすぎてイライラする...

このように感じたことがある方もいるのではないでしょうか。これらはアニメーションが逆にUXを低下させている例です。

実装方法によってはサイトに負荷がかかる場合もあるので、注意が必要です。

Point
アニメーションはポイントを抑えて使用することに意味があります。使いすぎには気を付けましょう。

AOS(aos.js)とは?

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

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

公式サイトにて、ページをスクロールして確認してみてください。

また、AOS(aos.js)は軽量で、パフォーマンスの観点からも優秀なライブラリです。

AOS(aos.js)の基本的な使い方

  1. AOSのファイルを読み込む
  2. HTMLを記述する
  3. JavaScriptを記述する

まずはこれらの順に、簡単に使い方を解説します。

Step1:AOSのファイルを読み込む

HTML内で読み込む、ファイルをダウンロードします。ダウンロードは公式サイト下部の「GET IT」から行います。

aos-master.zipがダウンロードされます。zipを解凍し、中身を確認してみましょう。

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

たくさんファイルがありますが、使用するのは上の2つです。この2つをHTML内で読み込みます。

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

どちらもheadタグ内読み込みます。JavaScriptファイルはbodyの閉じタグの直前で読み込まなくても、defer属性をつければ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" defer></script>

CDNを利用することもできます。バージョンが変わってる場合もあるので、ご自身で公式サイトも確認してみてください。

Step2:HTMLを記述する

  • Fade
  • Flip
  • Slide
  • Zoom

AOS(aos.js)のアニメーションタイプには、上の4種類が用意されています。さらにオプションを設定し、タイミングやトリガー、回転、動きなどを指定することが可能です。

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

使い方は簡単です。アニメーションさせたいHTML要素に上のようにdata-aos属性を指定します。

data-aos属性を指定した要素には、アニメーション発火時にaos-animateクラスが自動で付与されます。カスタマイズする際は、このaos-animateクラスを書き換えることになります。

Step3:JavaScriptを記述する

AOS.init()

JavaScripは最低限これだけで動きます。AOS(aos.js)を使う宣言だと思ってもらえれば良いです。共通の初期設定もできますが、それは後半でみていきます。

【駆け出しの方へ】独学に限界を感じてませんか?

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか?

  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

👆 メンターは全員現役エンジニア 👆

AOS(aos.js)のオプションや機能を詳しく紹介

オプションなども紹介しながら、実際の使い方を紹介します。

アニメーションタイプ

アニメーション内容
Fadeフェード表示
Flip回転表示
Slideスライド表示
Zoomズーム表示

既に紹介した通り、アニメーションさせたいHTML要素にdata-aos=”fade-right”のように属性を記述し、完了です。これだけで基本的なスクロールアニメーションの実装ができます!

DEMO1で全タイプ作成しました。

オプション

オプションを指定することで、アニメーションに詳細設定を加えることが可能になります。

<div data-aos="fade-right" data-aos-offset="300" data-aos-easing="ease-in">
    SAMPLE
</div>
  • 発火までの距離を300px
  • イージングタイプをease-in

上のオプションを指定した例です。

💡 オプション一覧

オプション名オプション内容デフォルト値
data-aos-offset発火までの距離 (px)120
data-aos-durationアニメーション時間 (ms)400
data-aos-easingイージングタイプease
data-aos-delay 発火までの秒数 (ms)0
data-aos-anchor発火位置を別要素に指定null
data-aos-anchor-placement発火位置を細かく設定top-bottom
data-aos-once一度のみの発火にするfalse
  • イージングタイプ(data-aos-easing)
  • 発火位置(data-aos-anchor-placement)

上の2つに関して、補足で詳しく解説します。

💡 イージングタイプ

オプションの中の「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-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

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

💡 発火位置

オプションの中の「data-aos-anchor-placement」は、発火位置を細かく設定するためのオプションです。

指定のHTML要素の"どこ"が、ウィンドウの"どこ"へ来たら発火させるか設定できます。

設定値一覧発火位置
top-bottom指定要素上部がウィンドウ下部へきたら発火
top-center指定要素上部がウィンドウ中央へきたら発火
top-top指定要素上部がウィンドウ上部へきたら発火
center-bottom指定要素中央がウィンドウ下部へきたら発火
center-center指定要素中央がウィンドウ中央へきたら発火
center-top指定要素中央がウィンドウ上部へきたら発火
bottom-bottom指定要素下部がウィンドウ下部へきたら発火
bottom-center指定要素下部がウィンドウ中央へきたら発火
bottom-top指定要素下部がウィンドウ上部へきたら発火

DEMO2で複数タイプ作成しました。

その他の機能

💡 オプションの一括指定

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

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

共通オプションを一括指定することでHTML側の記述量も減ります。オプションを変更したくなった場合も変更が楽です。

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

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

デバイスタイプデバイス
mobileスマートフォンとタブレット
tabletタブレット
phoneスマートフォン

下のように、無効にしたいデバイスを指定することが可能です。デバイス判定は、ユーザーエージェントを利用しています。

// スマホとタブレット時は無効
AOS.init({
    disable: 'mobile'
});
// タブレットのみ無効
AOS.init({
    disable: 'tablet'
});
// スマホのみ無効
AOS.init({
    disable: 'phone'
});

PCを指定するオプションは用意されていません。PC時無効にしたい場合は、次に紹介する方法を使います。

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

デバイス以外に、画面幅を指定し無効にすることも可能です。

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

上の例では横幅が1000pxより小さい環境ではアニメーションを無効にします。

AOS(aos.js)のカスタマイズ

AOS(aos.js)では様々なカスタマイズができる仕組みが用意されています。それらを使うことで自分好みの動きを実装できます。

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

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

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

💡 カスタマイズサンプル1

  • SP時はシンプルにフェードイン
  • PC時は左右100pxの位置からフェードイン
<div class="custom01">
    <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>
.custom01 [data-aos="new-animation"] {
    opacity: 0;
    transition-property: transform, opacity;
}

.custom01 [data-aos="new-animation"].aos-animate {
    opacity: 1;
}

@media screen and (min-width: 768px) {
    .custom01 [data-aos="new-animation"]:nth-of-type(odd) {
        transform: translateX(-100px);
    }

    .custom01 [data-aos="new-animation"]:nth-of-type(even) {
        transform: translateX(100px);
    }

    .custom01 [data-aos="new-animation"].aos-animate {
        transform: translateX(0);
    }
}
  • [data-aos=”new-animation”]にアニメーション開始前のスタイル
  • [data-aos=”new-animation”].aos-animateにアニメーション後のスタイル

アニメーションが発火するとaos-animateクラスが付くことを利用します。

※ 今回のコードの場合、SP時の動作は768px以上でも引き継がれます。

💡 カスタマイズサンプル2

  • SP時はシンプルにフェードインアップ
  • PC時は左から順にフェードインアップ
<div class="custom02">
    <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) {
    .custom02 div:nth-of-type(2){
        transition-delay: .1s;
    }
    .custom02 div:nth-of-type(3){
        transition-delay: .2s;
    }
}
  • SPは既存のフェードインアップ
  • PC時のみタイミングをズラす処理を入れる

既存のdata-aos=”fade-up”を使用し、PC時のみ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を使用します。

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

SCSSでの開発を行っている場合のみ、デフォルトのアニメーション距離を変更することが可能です。

アニメーション距離とは、移動距離のことで、デフォルトでは 100pxに設定されています。data-aos=”fade-up”の場合、100px下の位置からフェードインしながら上がってきます。

この距離は、aos-next > src > sass > aos.scss の $aos-distance: 100px; で設定されています。変更する際はその変数を上書きします。

アニメーション距離を設定するオプションは用意されていないので、変更する際はSCSSで行うか、CSSでカスタマイズするかしかありません。

CSSアニメーションライブラリの統合(Animate.cssとの統合例)

AOS(aos.js)は、外部のCSSアニメーションライブラリと統合することも可能です。Animate.cssライブラリとの統合を例に紹介します。

まずは、Animate.cssをダウンロードします。

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

headタグ内で読み込めば、Animate.cssを使用する準備完了です。

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

外部のCSSアニメーションライブラリと統合する場合、data-aos属性には統合するCSSアニメーションライブラリのアニメーションタイプを記述します。

今回指定しているfadeInUpはAnimate.cssのアニメーションタイプです。Animate.cssのアニメーションタイプは、公式サイトから確認することができます。

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

上のコードは、AOS(aos.js)のデフォルト動作を初期化しています。外部CSSライブラリと統合する場合、このコードが必要です。

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

animatedClassNameには、スクロールと連動し、アニメーション要素に付与したいクラス名を指定します。Animate.css では、アニメーション要素に「animated」クラスを指定する決まりとなっているので、こちらにはanimatedと記述します。

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

このコードの場合、アニメーション要素がウィンドウ内に入ったタイミングで、「animated」クラスと「fadeInUp」クラスの2つが自動で付与されます。

[data-aos] {
    visibility: hidden;
}

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

外部CSSライブラリを使用すると、アニメーション前の要素が非表示にならないことがあります。その場合、上のようにvisibility: hidden;でアニメーション前の要素を非表示にします。

まとめと参考記事

スクロールアニメーションを実装できるJavaScriptのライブラリ、AOS(aos.js)を紹介しました。

オプションやカスタマイズを加えることで様々なアニメーションを実装することが可能になるので、ぜひ使ってみてください。

また、ライブラリを使うと何らかの制約が出たり、自由度が低くなるケースもあります。スクロール連動型アニメーションは自作も簡単なので、興味がある方は下の記事も参考にしてみてください。

JavaScript(jQuery)でスクロールアニメーションを自作する方法を解説!

AOS(aos.js)以外にも簡単に導入できるアニメーション系のライブラリを紹介しているので、そちらも参考にしてみてください。

masonry.jsの使い方を解説!Pinterest風グリッドレイアウトを簡単実装! Block Reveal Effectsの使い方を紹介!2段階アニメーションを実装しよう! JavaScriptライブラリRellax.jsの使い方を解説!簡単にパララックスを実装しよう!

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

詳しいサービス内容を見る

転職・独立成功者も出ています!

この記事を書いた人

Tatsukiのアイコン

Tatsuki

空間コーディネーターから独学でプログラミングを学びwebの世界へ。コーディングが好き。普段はHTML・CSS / JavaScript / Reactを主に書いています。

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材