Intersection Observer Test

by kthornbloom

HTML

<div id="bg-txt">
TEST
</div>

<header>
  <div class="scroll-trigger" data-scrolltext="">
    The Header
  </div>
</header>

<section>
  <div class="scroll-trigger" data-scrolltext="Banannas">
  This element triggers intersection observer when it is within viewport.
  </div>
</section>

<section>
  <div class="scroll-trigger" data-scrolltext="In">
  This element triggers intersection observer when it is within viewport.
  </div>
</section>

<section>
  <div class="scroll-trigger" data-scrolltext="Pajamas">
  This element triggers intersection observer when it is within viewport.
  </div>
</section>

SCSS

#bg-txt {
  position: fixed;
  top: 50%;
  font-size: 4em;
  color: #a0a0a0;
  transform:translateY(-50%);
  text-transform:uppercase;
}

header {
  border: 1px solid green;
  height: 100vh;
  display: flex;
  align-items:center;
  z-index:1;
  position:relative;
}

section {
  border: 1px solid blue;
  padding: 10px;
  height: 100vh;
  display: flex;
  align-items:center;
  z-index:2;
  position: relative;
}

.scroll-trigger {
  border: 1px solid red;
padding: 10px;
}

JavaScript

const imageObserver = new IntersectionObserver((entries, imgObserver) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const currentSection = entry.target
			let newTxt = currentSection.getAttribute('data-scrolltext');
      const textEl = document.getElementById('bg-txt');
      textEl.textContent=newTxt;
    }
  })
});
const arr = document.querySelectorAll('.scroll-trigger')
arr.forEach((v) => {
  imageObserver.observe(v);
})