스크롤 호버 텍스트 애니메이션

<!-- 🔹 텍스트 애니메이션 컨테이너 -->
<div class="nexuslab-text-container">
  <h1 class="nexuslab-text">BEYOND DESIGN<span>WE BUILD BRANDS</span></h1>
  <h1 class="nexuslab-text">CRAFTING DIGITAL<span>EXPERIENCES</span></h1>
  <h1 class="nexuslab-text">TRANSFORMING VISIONS<span>INTO REALITY</span></h1>
  <h1 class="nexuslab-text">INNOVATION MEETS<span>EXCELLENCE</span></h1>
  <h1 class="nexuslab-text">JOIN<span>NEXUSLAB</span></h1>
</div>

<style>
/* 🔹 Pretendard 폰트 적용 */
@import url('https://cdn.jsdelivr.net/npm/pretendard/dist/web/static/pretendard.css');

/* 🔹 전체 컨테이너 */
.nexuslab-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100vh; /* 화면 전체 높이 */
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* 🔹 텍스트 기본 스타일 */
.nexuslab-text {
  font-family: 'Pretendard', sans-serif;
  font-size: 10vw; /* 더 크고 강조된 폰트 */
  font-weight: 900; /* 폰트 굵기 최대로 */
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  width: 100%;
  color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(to right, #ffffff, #ffffff) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

/* 🔹 호버 시 강조 효과 */
.nexuslab-text span {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #007BFF; /* 강조 색상 (넥서스랩 브랜드 컬러) */
  color: #fff;
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transform-origin: center;
  transition: all cubic-bezier(.1,.5,.5,1) 0.4s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 🔹 마우스 호버 시 텍스트 강조 */
.nexuslab-text:hover > span {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* 🔹 배경 없음 & 컨테이너 여백 0 적용 */
body {
  background: transparent;
  margin: 0;
  padding: 0;
}

/* 🔹 반응형 지원 */
@media (max-width: 768px) {
  .nexuslab-text {
    font-size: 12vw;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const textElements = document.querySelectorAll('.nexuslab-text');

  function animateTextOnScroll() {
    textElements.forEach(text => {
      let rect = text.getBoundingClientRect();
      let windowHeight = window.innerHeight;

      if (rect.top < windowHeight * 0.8 && rect.bottom > windowHeight * 0.2) {
        text.style.backgroundSize = "100%";
      } else {
        text.style.backgroundSize = "0%";
      }
    });
  }

  window.addEventListener("scroll", animateTextOnScroll);
  animateTextOnScroll();
});
</script>