Animate On Scroll Library

スクロールの動きに合わせてアニメーションを実装することができるプラグイン

michalsnik.github.io

CDN

<!-- CSSを読み込む -->
 <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
 <!-- jsファイルを読み込む -->
 <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

HTMLでアニメーションを設定したい要素に属性を追加する

data-aos属性で設定

<div data-aos="fade-up">
    この文字がフェードインします！
</div>

アニメーションの種類

Fade	フェードイン
Flip	くるんと回転して表示
Slide	スライドしながら表示
Zoom	ズーム

JavascriptでAOS.jsを動作させるためのプログラムを記述

<script>
AOS.init();
</script>

AOSのオプション

<script>
AOS.init({
  offset: 100,
  delay: 200,
  duration: 500,
  easing: 'ease-out',
  anchorPlacement: 'bottom-top',
  once: false
});
</script>

AOSのオプション(１)　offset

アニメーションが動作を始めるまでの距離

  offset:100

と記述すれば、アニメーションさせる要素が表示されて100pxスクロールしたら、アニメーションが始まります。

AOSのオプション(２)　delay

アニメーションを始めるまでの時間です。アニメーションを実行するまでの待機時間
値はミリ秒単位で指定

  delay: 200

と記述すれば、0.2秒待ってから開始されます。

AOSのオプション(３)　duration

どのくらいの時間をかけてアニメーションをさせるか
この時間を長くすればするほど、ゆっくりアニメーションが動きます
durationについてもミリ秒で設定します

AOSのオプション(４)　easing

イージングの種類を指定
イージングを設定することで、人はアニメーションを自然に感じることができるようになります
「ease-out」で設定

AOSのオプション(５)　anchorPlacement

アニメーションさせる要素として指定した要素が、ウィンドウのどの位置に来たら動作させるか

値	意味
top-bottom	指定要素上部がウィンドウ下部へきたら開始
top-center	指定要素上部がウィンドウ中央へきたら開始
top-top	指定要素上部がウィンドウ上部へきたら開始
center-bottom	指定要素中央がウィンドウ下部へきたら開始
center-center	指定要素中央がウィンドウ中央へきたら開始
center-top	指定要素中央がウィンドウ上部へきたら開始
bottom-bottom	指定要素下部がウィンドウ下部へきたら開始
bottom-center	指定要素下部がウィンドウ中央へきたら開始
bottom-top	指定要素下部がウィンドウ上部へきたら開始