Javascript

【JavaScript】AOSでスクロール時のアニメーションを簡単に実装

JavaScriptでスクロール時にアニメーションをつけたい。

簡単に実装できるライブラリはないかなーと探していたら、「AOS」を見つけました。

 

30DAYSトライアルでは、「wow.js」を使い、かなり使いやすかったですが、AOSも簡単に実装できたので、ご紹介します。

 

AOSを使ってスクロール時のアニメーションを実装

具体的な実装の手順です。

  • CDNでCSSとjavascript読み込み
  • 公式サイトからサンプルコードを貼り付け
  • オプションの設定

 

CDNでCSSとjavascript読み込み

CDNでCSSとJavaScriptを読み込みます。

<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>

 

</body>タグの直前に、AOSの呼び出しのためのコードを書きます。

 

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

 

これで、準備完了です。

 

公式サイトからサンプルコードを貼り付け

AOSの公式サイトで、サンプルコード付きのDEMOを確認できますが、記述するべきコードも簡略化されていてわかりやすいです。

 

例えば、下からフェードしてくるアニメーションの場合、

アニメーションさせたい要素に対して、以下のデータ属性をつけるだけでオッケー。

<div data-aos="fade-up"></div>

 

 

 

 

こんな感じですが、本当に簡単です。

 

 

 

オプションの設定

もちろん細かいオプションも設定することができます。

  <div
    data-aos="fade-up" <!--アニメーション-->
    data-aos-offset="120" <!--アニメーションを開始するスクロール位置-->
    data-aos-delay="0" <!--アニメーション遅延設定-->
    data-aos-duration="400" <!--アニメーションの時間-->
    data-aos-easing="ease" <!--イージング-->
    data-aos-once="false" <!--アニメーションが1回だけ実行される設定-->
    data-aos-anchor-placement="top-center" <!--アニメーション開始のトリガーになるスクロール位置-->
  >
  </div>

詳細については、GitHubを確認してください。

 

オプションは、要素に直接記述することで個別に設定することができます。

共通で設定する場合は、JavaScriptで設定をします。

 

<script>
AOS.init({
    offset: 300,
    duration: 1000,
    easing: 'ease-in-sine',
    delay: 500,
    once: 'true'
});
</script>

 

特に、data-aos-onceは、初期値がfalseになっているので、上下にスクロールするたびにアニメーションが発生してしまいます。

JavaScriptに共通オプションとして設定するといいかもですね。