スクロール時のアニメーションを簡単実装「AOS」の使い方【jQuery不要】

スクロールしていくとフェードインやスライドインなど様々なアニメーションでHTML要素を表示させる「AOS」の使い方を紹介します。

AOSとは？

AOS（Animate On Scroll library）は、軽量・簡単・jQuery不要という、非常にモダンなWeb制作に適したJSプラグインです。クライアントワークでも活用できるレベルの完成度です。

導入方法

CDNから読み込むのが一番簡単です。

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>

使い方

HTMLタグにdata-aos属性を追加するだけです。

<div data-aos="fade-up">ここにフェードインしたい要素</div>

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

設定できるアニメーションは fade-up, fade-down, zoom-in など豊富に用意されています。