スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方

2019/12/14

こんにちは、ゆうやです！

この記事では、

という方のお悩みを解決できるおすすめのJavascriptライブラリ「AOS」を紹介します！

スクロールアニメーションをjQueryなしで実装するならAOS！

Animate On Scroll Libraryの略で、

などの特徴がある超優秀なライブラリです！

百聞は一見にしかずなので以下のサンプルページで実際の挙動を確認していただけると幸いです(^o^)

■STEP１

AOSのファイル一式をダウンロードして設置でもいいですが今回はさくっと試したいので、

↓↓以下のCDNでAOSを読み込んでいきましょう。

CSS

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

■STEP２

↓↓AOSを初期化します！

INITIALIZE AOS

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

■STEP３

AOSでは3種類のアニメーション「Fade」「Flip」「Zoom」が用意されています！

↓↓あとはスクロールアニメーションをさせたい要素に「data-aos=”アニメーション名”」のように指定するだけで動いてくれます(^o^)

index.html

<!--「Fade」-->
<div data-aos="fade-up"></div>

<!--「Flip」-->
<div data-aos="flip-left"></div>

<!--「Zoom」-->
<div data-aos="zoom-in"></div>

めちゃくちゃ簡単で便利ですね！！

AOSの魅力は伝わりましたでしょうか。

スクロールアニメーションを実装する際はぜひ導入を考えてみてくださいまし。

スクロールつながりで、「黒色背景が先に表示されて後を追うようにめくれて画像が表示されるアニメーションを実装するにはどうするの？」という方は以下の記事で実装方法とサンプルを紹介しているのでチェックしてみてください〜！