現在web制作において、アニメーションを取り入れているサイトは良くみかけます。

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

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

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

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

• 欲しい情報がすぐに見つかった
• ページ読み込みが速い
• 使っていて楽しい
• 商品の購入までが分かりやすい

例えば、webサイトを訪問した際に、上記のようなことを感じることがあると思います。これらはユーザーの体験なので、UXです。

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

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

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

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

実装方法によってはサイトが重くなりますし、注意が必要です。

AOSとは？

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

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

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

また、軽量であるため、パフォーマンスの観点からも優秀なプラグインです。

aos.jsの使い方

1. プラグインファイルを読み込む
2. HTMLを記述する
3. JavaScriptを記述する

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

プラグインファイルを読み込む

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

ダウンロードは公式サイト下部の「GET IT」から行います。

「aos-master.zip」がダウンロード出来たと思います。このzipを解凍し、中身を確認してみましょう。

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

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

<!-- head内で読み込む -->
<link rel="stylesheet" href="css/aos.css">

<!-- body閉じタグ直前で読み込む -->
<script src="js/aos.js"></script>

ファイルを自身のプロジェクトディレクトリに置き、head内でaos.cssを、body閉じタグ直前でaos.jsを読み込みます。ご自身の環境によってパスは変えてください。

<!-- head内で読み込む -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<!-- body閉じタグ直前で読み込む -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

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

HTMLを記述する

AOSのアニメーションタイプには、この4種類が用意されています。

さらにオプションを設定し、タイミングやトリガー、回転、動きなどを指定することが可能です。

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

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

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

JavaScriptを記述する

AOS.init()

JavaScripは最低限これだけで動きます。AOSを使うよ！という宣言だと思ってもらえればOKです。ここで共通の初期設定もできます。それは後半でみていきます。

AOSのオプションや機能を詳しく見てみよう！

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

アニメーションタイプ

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

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

オプション

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

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

こちらは発火までの距離を300px、イージングタイプをease-inにした例です。

オプション一覧

イージングタイプ(data-aos-easing)と発火位置(data-aos-anchor-placement)は補足が必要なので詳しく解説します。

イージングタイプ

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

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

発火位置

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

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

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

その他の機能

オプションの一括指定

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

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

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

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

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

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

// スマホとタブレット時は無効
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では様々なカスタマイズができる仕組みが用意されています。それらを使うことで自分好みの動きを実装できます。

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

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

基本的に、JavaScriptを書かず、HTML・CSSだけでアニメーションのカスタマイズが可能です。

今回は、一例としてSPとPCでアニメーションタイプを変更してみたいと思います。

カスタマイズサンプル1

<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

<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; 箇所にて設定されています。変更する際はこちらを任意の距離に上書きします。

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

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

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

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

AOSは、外部のCSSアニメーションライブラリと統合することも可能です。Animate.cssライブラリとの統合を例に見ていきます。

まずは、Animate.cssライブラリを使用するために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のアニメーションタイプです。Animate.cssのアニメーションタイプは、公式サイトから確認することができます。

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

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

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

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

[data-aos] {
    visibility: hidden;
}

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

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

まとめと参考記事

今回は簡単にスクロールアニメーションを実装できるJavaScriptのプラグイン、AOSを紹介しました。

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

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

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