[Javascript] 스크롤에 따라 한글자씩 나타나게 하기

이렇게 스크롤을 하면 한글자씩 서서히 나타나게 하는 ui를 만들어보았다.

 

HTML

  <div class="section">

    <div class="sticky">

      <span class="split-letter">안</span>

      <span class="split-letter">녕</span>

      <span class="split-letter">하</span>

      <span class="split-letter">세</span>

      <span class="split-letter">요　</span>

      <span class="split-letter">헬</span>

      <span class="split-letter">로</span>

      <span class="split-letter">우</span>

      <span class="split-letter">~　</span>

      <span class="split-letter">반</span>

      <span class="split-letter">갑</span>

      <span class="split-letter">습</span>

      <span class="split-letter">니</span>

      <span class="split-letter">다</span>

      <span class="split-letter"></span>

    </div>

  </div>

이렇게 한 글자씩 span태그에 따로따로 담아주었다. 마지막 split-letter을 비워둔 이유는 나중에 밝히겠다.

 

CSS

.section{

  margin-top: 500px;

  margin-bottom: 500px;

  height: 200vh;

  background-color: blue;

}

.sticky{

  position: sticky;

  width: 100%;

  height: 100vh;

  top: 0;

  left: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}

.split-letter{

  font-size: 40px;

  color: white;

  transform: scale(0.8);

  opacity: 0;

  transition: all 0.3s;

}

.on{

  transform: scale(1);

  opacity: 1;

}

스크롤에 따라 한 글자씩 scale과 opacity를 조절하는 클래스를 미리 만들어두었다.

 

JAVASCRIPT

const sectionTop = document.querySelector('.section').offsetTop;

const splitLetter = document.querySelectorAll('.split-letter');

window.addEventListener('scroll',function(){

  let count = 0;

  count = Math.floor(window.scrollY / 10) - sectionTop / 10;

  for(let i = 1; i < splitLetter.length; i++){

    if(count > i * 5){

      splitLetter[i - 1].classList.add('on');

    } else{

      splitLetter[i - 1].classList.remove('on');

    }

  }

});

1. 스크롤 이벤트 처리:
   • 스크롤 이벤트 함수를 만들었다.
   • count 변수를 사용하고, 스크롤할 때마다 10씩 증가시키기 위해 window.scrollY 값을 10으로 나누었다. 이를 통해 10씩 증가하는 효과를 얻었다.
2. 섹션 처리:
   • sectionTop 값을 window.scrollY에서 뺌으로써, 파란색 섹션에 들어왔을 때 count의 값이 0이 되도록 하였다.
3. 반복문을 통한 클래스 조작:
   • 반복문을 사용하여 count의 값이 5의 배수일 때마다 on 클래스를 추가 및 제거하는 로직을 구현했다.
4. split-letter의 마지막 비워둔 요소:
   • split-letter 중에서 마지막 글자를 비워둔 이유는, 반복문에서 i를 1부터 시작했기 때문이다. 따라서 첫 번째 글자를 선택하기 위해 인덱스를 0부터 시작해야 했고, i에 -1을 해서 인덱스를 0으로 맞추다보니 마지막 글자를 출력하지 못하는 일이 생겨 빈 split-letter div를 생성해야했다

처음에는 자연스러운 애니메이션을 위해 함수를 사용하려 했으나, split-letter의 수에 따라 각각의 함수를 만들어야 하는 번거로움에 부딪혔다. 이에 대한 해결책을 찾지 못하고 난막해졌다. 그러나 클래스를 이용한 방식으로 전환하여 문제를 해결하기로 결정했다. 초기 계획과는 다르게 클래스를 활용하면서도 만족스러운 결과를 얻을 수 있었다.

 

한글자씩 스크롤마다 클래스를 부여하는 방법에 대한 초기 어려움이 있었지만, 주석을 활용하여 로직을 한글로 작성해보고 이를 토대로 코드를 구성하니 작업이 원활히 진행되었다. 초기에 겪은 어려움을 극복하고 성공적으로 결과물을 도출해내어 보람찬 경험이었다. 이러한 프로세스를 통해 새로운 도전과 성장을 경험할 수 있었다.