【AOS.js】jqueryを使わずにアニメーションを実装できるプラグイン

2020年10月29日

おはようございます、はんざきです

今回はWEBデザインにスクロールアニメーションを簡単に実装できる。【AOS.js】を紹介します

スクロールアニメーションとはWEBサイトをスクロールすると、下からふわっと文章や画像が出てきますよね、

そういう動きが実装できるプラグインになります。jQuery不要なので使いやすくて便利ですよ

AOS.jsの導入

公式：AOS – Animate on scroll library

導入はダウンロードとCDNの2種類があります。どちらも大丈夫ですが最初はCDNが楽なのでおススメです

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

上記のコードをヘッダーに張り付けて、読み込ませます

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

AOSを初期化・動作させるスクリプトを「/body」の閉めタグの手前に張り付けます

アニメーションの設定

実際にアニメーションを動かすために、要素にアニメーションを設定します

<h1 class="#" data-aos="fade-up">TEST</h1>

data-aos="fade-up"の部分がAOSの設定になります、これを設定すると下から要素が上がってくる動きになります

動きを変えたい場合は、fade-upの部分を変更します

アニメーションのコードと実装例は、公式デモで確認できます

オプションの設定

オプションを設定することで、アニメーションの動きを細かく制御することができます

<h1 class="#" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">TEST</h1>

上記のコードではアニメーションの時間と開始時間を変更しています。

なお、オプションの設定については公式サイトで確認できますよ

オプションは個別以外にまとめて指定することもできます

<script>
    AOS.init( {
        duration: 800,
        delay: 100,
    });
</script>

同じ動きをするアニメーションが多い場合は、まとめて指定すると楽ですね

jQuery

Posted by Hanzaki