垂直滚动时Ghost Text效果触发时机调整技术问题

当前代码的问题在于IntersectionObserver使用了默认配置，仅当元素与视口的交叉区域大于0时触发回调，导致效果在元素快移出屏幕时才激活。要实现元素进入视口或到达屏幕中间时触发效果，可以通过以下两种方式修改：

方法一：使用阈值（Threshold）控制可见比例 #

通过设置threshold参数，指定元素可见比例达到50%时触发效果，适配“到达屏幕中间”的需求：

const square = document.querySelector('.square');
square.classList.remove('square-transition');

// 创建观察器，设置触发阈值为50%可见
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio >= 0.5) {
      square.classList.add('square-transition');
    } else {
      square.classList.remove('square-transition');
    }
  });
}, {
  threshold: 0.5 // 元素可见区域占自身50%时触发回调
});

observer.observe(document.querySelector('.square-wrapper'));

方法二：精准判断元素到达屏幕中间位置 #

通过计算视口高度与元素位置，直接判断元素顶部是否到达屏幕中线：

const square = document.querySelector('.square');
square.classList.remove('square-transition');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const viewportMidpoint = window.innerHeight / 2;
    // 元素顶部进入屏幕中线及以下时触发效果
    if (entry.boundingClientRect.top <= viewportMidpoint) {
      square.classList.add('square-transition');
    } else {
      square.classList.remove('square-transition');
    }
  });
});

observer.observe(document.querySelector('.square-wrapper'));

CSS与HTML保持原配置 #

样式和结构无需修改，沿用原有代码即可：

.square {
  width: 100%;
  position: absolute;
  z-index: 1;
  opacity: 0.2;
  font-size: 200px;
  text-align: center;
  padding-top: 190px;
}

@media (prefers-reduced-motion: no-preference) {
  .square {
    transition: opacity 0.5s ease, transform 1.5s ease;
  }
}

.square-transition {
  opacity: 0.01;
  transform: translate3d(-10px, 0.2in, 0px);
}

<div class="square-wrapper">
  <div class="square square-transition">Design Concept</div>
</div>
<div>........</div>

通过以上调整，Ghost Text效果会在元素进入视口中间位置时触发，符合需求。

内容的提问来源于stack exchange，提问作者Zeeshan Hassan