javascript - 基于“相交观察器”的背景DIV淡入和淡出

Question

目前，我的背景div文本根据屏幕上显示的元素而变化。

有没有办法做到这一点:

随着用户滚动

，文本逐渐淡出
然后div进入屏幕中心时

淡入并处于100％位置

然后，随着用户进一步滚动，

逐渐淡出
当用户向后滚动

时，

则相反

我已经看到了基于JQuery的解决方案，但我想使用 Vanilla javascript完成此操作。

const section = document.querySelectorAll('.check');
const bg = document.querySelector('.bg');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    className = entry.target.classList[1];
    console.log(className);
    if (entry.isIntersecting) {
      if (className === 'first') {
        bg.innerHTML = 'FIRST';
      } else if (className === 'second') {
        bg.innerHTML = 'SECOND';
      } else if (className === 'third') {
        bg.innerHTML = 'THIRD';
      } else if (className === 'fourth') {
        bg.innerHTML = 'FOURTH';
      } else if (className === 'fifth') {
        bg.innerHTML = 'FIFTH';
      } else if (className === 'sixth') {
        bg.innerHTML = 'SIXTH';
      }
    } else {
    }
  })
});

section.forEach(section => {
  observer.observe(section);
});

.check {
  width: 100px;
  height: 20px;
  background-color: red;
  color: white;
  padding: 20px;
}

.spacer {
  height: 100vh;
  width: 100px;
}

.bg {
  position: fixed;
  font-size: 100px;
  color: #c9c9c9;
  z-index: -100;
}

.fadeIn {
  opacity: 1;
}

.fadeOut {
  opacity: 0;
}

<div class="bg">
  BG
</div>

<div class="check first">
FIRST
</div>
<div class="spacer">
</div>

<div class="check second">
SECOND
</div>
<div class="spacer">
</div>

<div class="check third">
THIRD
</div>
<div class="spacer">
</div>

<div class="check fourth">
FOURTH
</div>
<div class="spacer">
</div>

<div class="check fifth">
FIFTH
</div>
<div class="spacer">
</div>

<div class="check sixth">
SIXTH
</div>
<div class="spacer">
</div>

Answer 1

不是我最好的作品，而是我的作品

const section = document.querySelectorAll('.check');
const bgText = document.querySelector('.bg__text');

const capitalize = (value) => {
  const [firstChar, ...rest] = value;

  return firstChar.toUpperCase() + rest.join('').toLowerCase()
}



const checkpoints = Array.from(document.querySelectorAll(".check"))
  .map(element => ({
    id: element.classList[1],
    element,
    rect: element.getBoundingClientRect()
  }));

let currentElement = null;

window.addEventListener("scroll", () => {
  const scrollY = window.scrollY;
  const innerHeight= window.innerHeight;
  
  const distances = checkpoints.map(pr => ({
    ...pr,
    distance: Math.abs(pr.rect.y - scrollY)
  }));
  
  distances.sort((prev, next) => prev.distance > next.distance ? 1 : -1);
  
  const distance = distances.find(pr => pr.element === currentElement).distance;
  
  let opacity = distance / innerHeight;
  opacity = opacity > 0.5 ? 1 - opacity : opacity;
  bgText.style.opacity = opacity * 2;
  
})

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    const element = entry.target;
    className = element.classList[1];

    if (!entry.isIntersecting) {
      return;
    }

    currentElement = element;
    bgText.textContent = capitalize(className);

  })
});

section.forEach(section => {
  observer.observe(section);
});

.check {
  width: 100px;
  height: 20px;
  background-color: red;
  color: white;
  padding: 20px;
}

.spacer {
  height: 100vh;
  width: 100px;
}

.bg {
  position: fixed;
  font-size: 100px;
  color: #c9c9c9;
  z-index: -100;
}

.fadeIn {
  opacity: 1;
}

.fadeOut {
  opacity: 0;
}

<div class="bg">
  <div class="bg__text"></div>
</div>

<div class="check first">
  FIRST
</div>
<div class="spacer">
</div>

<div class="check second">
  SECOND
</div>
<div class="spacer">
</div>

<div class="check third">
  THIRD
</div>
<div class="spacer">
</div>

<div class="check fourth">
  FOURTH
</div>
<div class="spacer">
</div>

<div class="check fifth">
  FIFTH
</div>
<div class="spacer">
</div>

<div class="check sixth">
  SIXTH
</div>
<div class="spacer">
</div>