ウィンドウをスクロールさせると要素がフェードインしながら表示されるスクリプト［AOS（Animate On Scroll Library）］の使い方を紹介します。

まずは試しに実装してみたサンプルをご覧ください。

DEMO : https://on-ze.com/demo/js-aos/

要素を表示させる際の動きは「Fade」「Flip」「Zoom」の３種類が用意されています。
ここにタイミングや速度、上下左右の動きや回転の向きを指定できるので、実際にはかなり多くのカスタマイズが可能です。

jQuery不要で動くのも嬉しいですね。

配布されているJSファイルとCSSファイルの２つを読み込み、特定の要素に『data-aos』属性を指定するだけで動きます。

各ファイルのダウンロードは以下より。

AOS : http://michalsnik.github.io/aos/

AOS（Animate On Scroll Library）の導入方法

まずはJSとCSS各ファイルを読み込みますが、両方ともCDNで配信されています。
手っ取り早く使いたいのでこれを利用しましょう。

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

<body>
...
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>
<script>AOS.init();</script>
</body>

上記のようにCSSファイルは<head>〜</head>内に、JSファイルは<body>〜</body>内に挿入します。

さらにJSファイルを読み込んだ直後に<script>AOS.init();</script>と記述してAOSを機能させます。

ここまで済ませてしまえば既に準備は終了。
あとはエフェクトを効かせたい要素にマークアップしていくだけです。

AOS（Animate On Scroll Library）を効かせたい要素をマークアップする。

例えば「フェード・イン」しながら表示させたい場合は次のように記述します。

<div data-aos="fade-in">コンテンツ</div>

カスタム属性『data-aos』で指定するだけなので簡単ですね。

この他に指定できるエフェクトは以下のとおりです。

Fade animations
fade-in
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left
Flip animations
flip-up
flip-down
flip-left
flip-right
Slide animations
slide-up
slide-down
slide-left
slide-right
Zoom animations
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

概ね必要とされるエフェクトはすべて網羅している印象です。素晴らしいですね。

その他のセッティング

AOSでは要素を表示させるタイミングや動かす距離、アンカーポイントなど、各種オプションも指定できます。
もちろん、これらもカスタムデータ属性で指定するだけなので非常に簡単です。

  • data-aos-offset
  • data-aos-duration
  • data-aos-easing
  • data-aos-delay
  • data-aos-anchor
  • data-aos-anchor-placement
  • data-aos-once

複数指定する場合は以下のようになります。

<div data-aos="fade-in" data-aos-easing="ease-in-sine" data-aos-once="true">コンテンツ</div>

さらに詳しくはGitHubで紹介されていますのでご確認ください。

GitHub : https://github.com/michalsnik/aos