交叉口观察者多用途

Question

I'm familiar with the intersection observer, however i'm stuck on how to use it with different elements that has different animations consider the following:

<div id="hero">
  <h1>hello world<h1>
</div>

<div class="nav">
  <li>nav item</li>
  <li>nav item</li>
  <li>nav item</li>
</div>

now let's say when the div with id of hero comes to view port move it to the left

const io = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const hero = entry.target
        hero.style.transform = 'translateX(30px)'
        observer.unobserve(target)
      }
    })
  })
  io.observe(document.querySelector('#hero'))

now that's totally fine but what if i want to watch another element and give different style

currently i'm just copying the same code and changing the target and what i would like to do like so

const io2 = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const hero = entry.target
        hero.style.opacity = 0;
        observer.unobserve(target)
      }
    })
  })
  io.observe(document.querySelector('.nav'))

that's of course very repetitive, and if i have another element i would end up just copying the same exact more with few changes

so how to implement a better solution without repeating myself over and over

Answer 1

after I read your question again I understood what you want, and I made this script for you! hope it helps!

 const Observe = (target, onIntersection)=>{ const io = new IntersectionObserver((entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { if( onIntersection && typeof onIntersection == "function" ){ onIntersection(entry); observer.unobserve(target); } } }); }); io.observe(target); }

 <div id="hero"> <h1>hello world<h1> </div> <div class="nav"> <li>nav item</li> <li>nav item</li> <li>nav item</li> </div> <script> document.addEventListener("DOMContentLoaded", ()=>{ Observe( document.querySelector("#hero"), function(entry){ const hero = entry.target; hero.style.transform = 'translateX(30px)'; } ); Observe( document.querySelector(".nav"), function(entry){ const hero = entry.target hero.style.opacity = 0; } ); }); </script>

Answer 2

Thank you for everything for the code too strong it unlocked my problem !!!