【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1-2.「AOS編スクロール連動カスタムイベント」

前回、スクロールに合わせてふわっと表示させるJavaScriptのライブラリ

｢AOS (Animate On Scroll)｣

について導入、実装について解説しました。

webabc.hatenablog.jp

AOSの標準機能だけでお手軽簡単にふわっとフェードインなどの効果が実装出来ますが、今回はその表示、または非表示になるタイミングにJavaScriptのイベントリスナを使用して、通常とは別の新しいカスタムイベント処理を追加する方法を解説します。

AOSカスタムイベントについて解説

AOSカスタムイベント追加実装コードサンプル

まずは以下が全てのAOS適用部分のイン・アウト時にイベントを追加するコードです。

document.addEventListener('aos:in', ({ detail }) => {
  console.log('animated in', detail); //ここに表示の際の追加処理を記述
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('animated out', detail); //ここに非表示の際の追加処理を記述
});

これは公式掲載のサンプルで、コンソールにログを表示させてるだけですね。

ここで例えばクラスの付け外しをするなど様々な処理が追記できます。

AOSカスタムイベント追加実装コードサンプル2

特定のAOS適用箇所のみにイベント追加する場合は、以下のように要素に｢data-aos-id｣属性を任意の名前でつけます。

<div data-aos="fade-in" data-aos-id="custom-hoge"></div>

そしてJavaScriptで先程と同じ方法で、さらにid名を追加して記述します。

document.addEventListener('aos:in:custom-hoge', ({ detail }) => {
  console.log('animated in', detail); //ここに表示の際の追加処理を記述
});

document.addEventListener('aos:out:custom-hoge', ({ detail }) => {
  console.log('animated out', detail); //ここに非表示の際の追加処理を記述
});