【js】AOSでスクロールアニメーションを設定する

ホームページにアニメーションが欲しいと要望されることがありますが、ここ最近顕著にそれを感じています。

animate.cssやwow.js、inview.jsを使用して実装してアニメーションをつけていますが、個人的に比較的実装が楽だった“AOS”の設定を紹介します。

サンプルは以下よりお確かめください。

See the Pen qBZjKmr by AkiraSatou (@SatoWeb) on CodePen.light

1.cssとjsの読み込み

CDNまたはこちらからファイルをダウンロードしてください。サンプルではCDNを使用しています。
コード内にcssとjsを読み込みます

cssは<head></head>内に、jsは</body>の直前に記述します。

<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"></script>

アニメーションを設定したい箇所に“data-aos=”fade-up”など、アニメーションの種類を設定します。種類に関しては公式サイトをご覧ください。

<div data-aos="fade-up">
<p>文字列</p>
<img src="画像ファイルのパス" alt=""/>
</div>

アニメーションの細かい動作の設定も可能です。
下記ではアニメーションの時間、表示の仕方、スクロールごとにアニメーションするかの設定を一括で設定しています。個別の設定も可能です。

<script>
   AOS.init({
    duration: 1500,
    easing: 'ease-in',
    once: false,
  });
 </script>

jQueryに非依存で設定も簡単ですし、アニメーションの設定や種類も豊富なので、おすすです。

SATOWEBではホームページの新規制作、リニューアル、業務委託等、受付中です。
お問い合わせはこちらから受け付けていますので、お気軽にご相談ください。