6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

IntersectionObserverを使うときに、複数作っても大丈夫?と悩んだのでメモ

Posted at

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

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

やりたかったこと

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

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

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

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

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

検索してみた

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

でも、よくよく考えてみれば、
インスタンスなのだから、いくつか作っても全く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インスタンスを1つにして、
その中のコールバック関数で、
要素の種類に応じて、違うアニメーションをつけるとかいう方法もあるのだろうか、
とかぼんやり考えています。

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?