おしゃれプロモサイトの実装に便利なスクロールアニメライブラリー

2017年07月04日　13時00分更新

文●Gajendar Singh

ツイートする

スクロールアニメーション用ライブラリー「AOS」のチュートリアルをお届けします。手軽で柔軟なライブラリーなので、クライアントから要望の多いプロモーションサイトで重宝しそうですね。

フロントエンド開発者は、ページスクロールに合わせて迫力あるアニメーションエフェクトの実装をクライアントから求められることがよくあります。求められた課題を楽にこなせるライブラリーはたくさんあります。AOS（Animate on Scroll）もその1つです。スクロールに合わせてさまざまなアニメーションで要素を画面に表示します。

この記事ではAOSの内部動作、インストール方法、使い方を紹介するチュートリアルです。最後まで読めば、クライアントの希望通りのスクロールアニメーションが作成できるでしょう。

AOSライブラリーのインストール方法

AOSをBowerかnpmでインストールします。

Bowerでインストールする場合

bower install aos --save

npmでインストールする場合

npm install aos --save

AOSのスタイルシートとスクリプトへのリンクを記述します。

<link rel="stylesheet" href="bower_components/aos/dist/aos.css">

<script src="bower_components/aos/dist/aos.js"></script>

または、CDNでAOSのスタイルシートとJavaScriptファイルをダウンロードします。

CSSへのリンク

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

JavaScriptの記述方法

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

これでOKです。ほかに依存オブジェクトがないので、Webサイトのパフォーマンスを良好に保てます。

JavaScriptファイルに次の一行を追加するとAOSを初期化できます。

AOS.init();

AOSを使う

ライブラリーを初期化したら、必要な属性をいくつか追加します。

HTML要素にdata-aos="animation_name"を追加すると基本的なアニメーションが使えます。

「fade」「fade-up」「fade-down-left」などのフェードアニメーション、「flip-up」「flip-left」などのフリップアニメーション、「slide-down」「slide-right」なのどスライドアニメーションと、選択可能なアニメーションのタイプがいくつかあります。

マークアップ例

<div class="box a" data-aos="fade-up">
  <h2>Animated using fade-up.</h2>
</div>
<div class="box b" data-aos="flip-down">
  <h2>Animated using flip-down.</h2>
</div>
<div class="box b" data-aos="zoom-in">
  <h2>Animated using zoom-in.</h2>
</div>

前のセクションで紹介した初期化用のコードを除けば、アニメーションの実装はこれだけです。

動作を確認しましょう。

AOSのデータ属性でアニメーションを設定する

アニメーションの設定に使えるデータ属性のリストを紹介します。

data-aos-offset：タイミングを指定し、前後でアニメーションをトリガーできる。デフォルト値は120px
data-aos-duration：アニメーションの継続時間を指定する。値は50～3000の範囲に50ms刻みで任意に設定できる。継続時間はCSSで処理されるので、設定があまりに小刻みだったり長めだったりすると、CSSのコードサイズが不必要に大きくなる。継続時間はほとんどすべてのアニメーションにうまく対応できるものを設定しておくと良い。デフォルト値は400
data-aos-easing：アニメーションのタイミング（イージング）機能をコントロールする。使用可能な値はlinear、ease-in-out、ease-out-quartなど。GitHubプロジェクトのReadmeファイルですべての有効な値のリストを確認できる

次の例ではdata-aos-durationとdata-aos-easingを使っています。

ほかにも以下のデータ属性が使えます。

data-aos-anchor：この属性は別の要素の位置を基準にしてアニメーションをトリガーするときに便利。任意のセレクタの値を設定できる。デフォルト値はnull。nullはすべてのアニメーションがその要素自体の位置との関係でトリガーされる
data-aos-anchor-placement：デフォルトではその要素の最上部がウィンドウの最下部にくるとすぐにアニメーションが適用される。この反応はdata-aos-anchor-placement属性で変更できる。top-bottom、top-center、top-topのように2つの単語をハイフンで区切って設定する。最初の単語をcenterやbottomにも設定できる
data-aos-once：特定の要素が最初に画面に入ったときに一度だけアニメーションを実行するのか、上下スクロールで要素が出現するたびにアニメーションを実行するかをコントロールする。デフォルトでは、スクロールで要素が出現するたびに実行する。値をfalseにすると、アニメーションが一度だけ実行される

以下の例ではdata-aos-anchor-placementを使っています。

AOSライブラリーの内部動作を探索する

Animate on Scrollはロジックとアニメーションの処理の分離を意図しています。ロジックはJavaScriptに、アニメーションはCSSに記述します。分離することで、オリジナルのアニメーションを記述しプロジェクトの必要に応じて変更を加えるときに、ワークフローが明快でメンテナンスしやすくなります。

このライブラリーはすべての要素と位置を管理します。設定内容に従ったaos-animateクラスの動的な追加と削除が可能です。たとえば、aos-animateクラスは適用された要素がビューポートから外れるたびに削除されます。一方data-aos-onceの値をtrueにすると、aos-animateが削除されずスクロールイベントで要素が画面に入ってもアニメーションは起動しません。

さらにAOSではHTMLドキュメントの<body>に属性のデフォルト値を適用します。たとえばdata-aos-easingの値はeaseで、data-aos-durationは400です。

先に述べたように、アニメーションの継続時間は50ms刻みで50～3000の範囲に限定されています。アニメーションの継続時間に225msは設定できません。そこでCSSを使ってオリジナルの継続時間を設定します。

body[data-aos-duration='225'] [data-aos],
[data-aos][data-aos][data-aos-duration='225']{
  transition-duration: 225ms;
}

AOSではオリジナルのカスタムアニメーションを簡単に追加できます。

data-aos属性のセレクタを作成し、セレクタにカスタムアニメーションの名前を設定するのです。

アニメーション用のプロパティと初期値を追加し、さらにアニメーションするプロパティの名前に設定したtransitionプロパティも記述します。

たとえば、アニメーション「rotate-c」を作成し、適用する要素をデフォルトで-180度回転させる場合のCSSは以下の通りです。

[data-aos="rotate-c"] {
  transform: rotate(-180deg);
  transition-property: transform;
}

CSSのあとにCSSのルールを追加すると、アニメーションの最終段階を設定できます。この例では要素を-180度から0度に回転させています。

[data-aos="rotate-c"].aos-animate {
  transform: rotate(0deg);
}

選択したHTML要素にdata-aos="rotate-c"を追加すると、ユーザーがスクロールをして要素が画面に入ると、要素が時計回りに（-180度から0度まで）回転します。

次のデモは、上の方法を使って時計回りと反時計回りのカスタム回転アニメーションを示しています。

そのほかの機能

AOSライブラリーでは、融通がきいて使いやすい機能を数多く提供してます。要素ごとに属性を設定する代わりに、init()関数にオブジェクトとして属性を渡します。

AOS.init({
  offset: 200,
  duration: 800,
  easing: 'ease-in-quad',
  delay: 100,
});

ある種のデバイスや特定の状況下では、disableキーで、値にデバイスの種類「mobile、phone、tablet」を設定してアニメーションを無効にします。関数でライブラリーを無効にすることも可能です。

2つの記述例を示します。

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

AOS.init({
  disable: function () {
    var maxWidth = 800;
    return window.innerWidth < maxWidth;
  }
});

デモでは、上の関数で画面が800pxよりも小さい場合にAOSアニメーションを無効にしています。

init()のほかに、AOSには関数が2つあります。refresh()とrefreshHard()です。

refresh()は要素のオフセットと位置の再計算に使います。ウィンドウのリサイズといったイベントで自動的に呼び出されます。

refreshHard()は、プログラムコードで要素がDOMから削除されたり、DOMに追加されたりするたびに自動的に呼び出されます。これにより、ライブラリーでAOS要素の配列が最新の状態に保たれます。配列の更新に伴ってrefreshHard()がrefresh()関数をトリガーし、オフセットをすべて再計算します。