observer　=　new IntersectionObserver はいくつも作れます！

コーディング練習でPhotoshopカンプからのコーディングを練習していたときに、 少し悩みました。 でも、よく考えたら、ふつうにつくれるでしょうということのような気もしますが、 ぼくの勉強も含めて記事にしようと思いました。

やりたかったこと

１つのページの中で、交差オブザーバーを使って、以下の２つを付けたいと思いました。

• ある程度スクロールしてきたらヘッダー出現
• スクロールに合わせて、タイトルや画像が入ってくる、よくあるやつ

最初にヘッダーの出現をIntersectionObseverを使って実装していました。 その後、スクロールに合わせてのアニメーションはお手軽なAOSにしようとしました。 すると、まだきちんと確認していないのですが、競合してしまっているような感じがしました。 なので、すべてのアニメーションをIntersectionObseverを使おうとしました。

ちがうアニメーションをつけたい。

ということで、オブザーバーのインスタンス（？）を２つ作りたいなと思ったのですが、 ふと、 「２つ作っても大丈夫なのか？」と 疑問に感じたので、調べてみようと思い立ったしだいです。

検索してみた

「IntersectionObsever　複数」などで検索すると 「複数要素を監視」の記事が多くて、Observerインスタンスを２つ作れるのか、 複数のインスタンスを作って、違うコールバック関数を使いたいという例が出てきません。

でも、よくよく考えてみれば、 インスタンスなのだから、いくつか作っても全くOKってあとで気づいた次第です。

解決して書いたコード

// ヘッダーが現れるときのアクション
// これはある程度スクロールしたらクローンのヘッダーが上からスライドダウンしてくるアニメーションを付けています。
const options = {
  rootMargin: "80%",
  threshold: 1.0,
};
const headerObserver = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (!e.isIntersecting) {
      headerClone.classList.add("clone-open");
    }
    if (e.isIntersecting) {
      headerClone.classList.remove("clone-open");
    }
  });
}, options);
headerObserver.observe(mv);

// タイトルアニメーション
// これは各セクションのタイトルが見えたら、左からシュッと入ってくるアニメーション
const titleObserver = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting && !e.target.classList.contains('slideLeft')) {
      console.log(e.target);
      e.target.classList.add("slideLeft");
    }
  });
});
const animateTitles = document.querySelectorAll('.c-section__heading-block');
animateTitles.forEach((t)=>{
    titleObserver.observe(t);
})

// 画像のアニメーション
// いくつかの画像に下からシュッと出現するアニメーション
const imageObserver = new IntersectionObserver((entries)=>{
    entries.forEach((e)=>{
        if (e.isIntersecting && !e.target.classList.contains('fadeUp')) {
      console.log(e.target);
      e.target.classList.add("fadeUp");
    }
    })
})
const animateImages = document.querySelectorAll('.js-animate-image');
animateImages.forEach((t)=>{
    console.log(t.target);
    imageObserver.observe(t);
})

今後のこと

パフォーマンス的にどうなのだろうかというところは今後の課題。 Obseverインスタンスを１つにして、 その中のコールバック関数で、 要素の種類に応じて、違うアニメーションをつけるとかいう方法もあるのだろうか、 とかぼんやり考えています。