스크롤시 글씨 움직이기 채택완료

아래의 코드를 한번 참고를 해보시겠어요..

<style>
  body {
    height: 200vh; /* 스크롤을 위해 충분한 높이 추가 */
  }

  .scroll-area {
    position: relative;
    height: 100vh; /* 전체 화면을 차지하는 영역 */
    background-color: #f0f0f0; /* 배경색 */
    overflow: hidden; /* 내부 내용이 영역을 넘치지 않도록 */
  }

  .section-title {
    margin: 0;
    font-size: 200px;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    right: -30%; /* 초기 위치 */
    transform: translateY(-50%);
    z-index: -1;
    white-space: nowrap;
  }

  .paralax-title {
    font-family: var(--font-Poppins);
    font-size: 20rem;
    color: #0981fd;
    opacity: 0.05;
    font-weight: 600;
  }
</style>

<div class="scroll-area">
  <div class="section-title">
    <h3 class="paralax-title">TEST</h3>
  </div>
</div>

<script>
let didScroll = false;
let paralaxTitles = document.querySelectorAll('.paralax-title');
let scrollArea = document.querySelector('.scroll-area');
let scrollAreaTop = scrollArea.offsetTop;
let scrollAreaHeight = scrollArea.offsetHeight;

const scrollInProgress = () => {
  didScroll = true;
}

const raf = () => {
  if (didScroll) {
    const scrollY = window.scrollY;

    // 스크롤이 특정 영역에 있는지 확인
    if (scrollY >= scrollAreaTop && scrollY <= (scrollAreaTop + scrollAreaHeight)) {
      const moveAmount = (scrollY - scrollAreaTop) / 10; // 이동량 계산
      paralaxTitles.forEach((element) => {
        element.style.transform = `translateX(${moveAmount}px)`;
      });
    } else {
      // 영역 밖일 때 초기 위치로 되돌리기
      paralaxTitles.forEach((element) => {
        element.style.transform = `translateX(-30%)`; // 초기 위치 값으로
      });
    }

    didScroll = false;
  }
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);
window.addEventListener('scroll', scrollInProgress);
</script>