【AOSの活用】JavaScriptのスクロール処理をより簡単に！

WebサイトでのAOSの活用

AOSとは

AOSとは「Animate On Scroll」の略でして、要はJavaScriptのライブラリになります。

今まで、Webサイトで特定の位置までスクロールしたらスライドアニメーションするといった内容を実装するため、要素の位置を監視できる「JavaScriptのIntersection Observer API」というものを使用して簡単にブラウザでのスクロール処理を実装してきました。

ですが、今回AOSというJavaScriptライブラリを使用してみると「JavaScriptのIntersection Observer API」以上に驚くほど簡単にスクロール処理が実装できたので、その簡単なまとめを今回題材として記していきたいと思います。

使用方法

AOSを使用するにはAOSのCDNをHTMLに記入する方法と、AOSのaos.cssファイルとaos.jsファイルをダウンロードしてリンクを貼る方法とあります。
ダウンロードする場合はこちらから

手軽に実装する場合はCDNがあります。
CDNは指定の位置にコピペするだけでAOSの機能が使える大変便利なものです。
何らかの原因でCDNが繋がらなくなることを想定する場合は、「aos.css」と「aos.js」の２点をダウンロードして使うのがオススメです。

CDNはこちら↓

headタグ内

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

body閉じタグ直前

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init();
</script>

左右スライドアニメーション

実装方法はBootStrapやTailwindcssの使い方に似てます。
あとはWebサイトをスクロールしたら、画像が出現のタイミングで画面左からアニメーションスライドする場合は
「data-aos="fade-left"」をスクロールさせたいHTMLタグ内に書き足すだけです。

例えば

<img src="slide.jpg" alt="スライド画像" data-aos="fade-left">

画面をスクロールすると「data-aos="fade-left"」を記述した画像が左側からスライドしながらフェードします。

逆に「data-aos="fade-right"」だと右側からスライドしながらフェードします。

<img src="slide.jpg" alt="スライド画像" data-aos="fade-right">

左にスライドアニメーション

他にも多数のオプションがあるのでぜひいろいろ試してみましょう！
オプション掲載のリンクはこちら

例えば
画像の「ズームアウト」など

<img src="zoom.png" alt="ズーム画像" data-aos="zoom-out">

タイミングをずらしながら上にスライドするアニメーション

「data-aos-delay」を使うことで、数字を大きく設定する事に画像が遅延してスライドされます。
「data-aos="fade-up"」で上方向にスライドされます。
今回の場合だと左から順に上にスライドされる感じになります。

上にスライド遅延アニメーション

自作アニメーションの適用方法

回転するアニメーションを作ってみました。

HTML

<img src="inu.jpg" alt="回転画像" data-aos="create-animation">

CSS

[data-aos="create-animation"]{
  /* アニメーション前のスタイル */
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}
[data-aos="create-animation"].aos-animate{
  /* アニメーション後のスタイル */
  opacity: 1;
  transform: rotate(360deg);
}