スクロールで見えた要素にアニメーションを追加できるAOSの使い方

AOSでアニメーション追加

Webサイトを作成しているときに下にスクロールして特定の要素が見えたときにフェードインなどで表示させたいことがある。

AOSはAnimate On Scroll Libraryの略でその名の通りスクロールして特定の要素が見えたときにフェードインなどで表示させるJavaScriptライブラリです。

AOS - Animate on scroll library

AOSの使い方

まずAOSのCSSとJavaScriptを読み込む。

AOSを使用するにはAOS.init()を実行して初期化が必要なので忘れずに。

<link rel="stylesheet" href="https://unpkg.com/aos/dist/aos.css">
<script src="https://unpkg.com/aos/dist/aos.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => AOS.init())
</script>

あとはHTMLにdata-aosという属性を付けてfade-rightなどを追加するだけでスクロールして特定の要素が見えたときにアニメーション表示が発生する。

何度も同じ要素が表示・非表示が繰り返すとうざったく感じるのでdata-aos-once="true"も追加して1度だけ実行されるようにすると良いだろう。

<p data-aos="fade-right" data-aos-once="true">
  <img src="/s/sample.jpg">
</p>

AOS Sample

アニメーションの表示時間はデフォルトでは400msなので200msなどに変更したい場合はdata-aos-durationでミリ秒を指定する。

<p data-aos="fade-right" data-aos-duration="200" data-aos-once="true">
  <img src="/s/sample.jpg">
</p>

AOS Sample (200ms)