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

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

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

この記事では、

  • スクロールしていくとふわっと表示されるアニメーションがやりたい!
  • でもいろいろとJavascriptで書かなきゃいけないのかな、大変そう、、、
  • jQueryなしで軽量なスクロールアニメーションを実装する方法を知りたい

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

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

AOSとは

Animate On Scroll Libraryの略で、

  • jQuery不要
  • JSほぼ書かなくてOK
  • 軽量

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

AOS実装のサンプル

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

サンプルページでスクロールアニメーションをみる

AOSを使ってみる

■STEP1

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

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

CSS
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
JS
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

■STEP2

↓↓AOSを初期化します!

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

■STEP3

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の魅力は伝わりましたでしょうか。

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

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

画像を左から右にスライドインで表示するアニメーション画像を左から右にスクロール量に応じてスライドインで表示するアニメーション【Javascript・CSS】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です