[JavaScript] 텍스트 물결 효과 만들기

포트폴리오 제작 중 CSS 애니메이션을 활용해 문장이 물결치는 듯한 효과를 내고 싶었다.

예전에 물결 효과를 구현할 땐 HTML에서 모든 글자를 하나하나 span 태그로 감싸서 각각 애니메이션과 딜레이를 적용했는데, 이러면 두 가지 문제가 있었다.

• HTML 코드가 너무 길어져 비효율적임
• 텍스트가 바뀌면 수정이 번거로움

따라서 HTML에 span 태그를 사용하지 않고 JS로 구현할 방법을 찾아보았는데, 애니메이션을 적용할 요소의 내용을 span 태그로 감싼 상태로 바꿔주면 된다.

 

<!--HTML-->

<h1>Hello Words!</h1>

/* CSS */

h1 span{animation:wave_animation 1s ease-in-out infinite;}

@keyframes wave_animation{
    0%, 50%{transform: translateY(0);}
    25%{transform: translateY(-8px);}
}

 

JS를 활용해 h1 태그 안의 'Hello Words!'의 모든 문자를 span 태그로 감싼 상태로 바꿀 예정이기 때문에 h1 태그가 아닌 span 태그에 애니메이션 효과를 적용하는 것이 맞다.

/* JavaScript */

// 애니메이션 효과를 적용할 텍스트를 배열에 저장
const title=document.querySelector('h1');
const textArr=[];
textArr.push(title.textContent);

// h1 태그를 span 태그로 채우기 위해 비움
title.textContent="";

// 텍스트 길이만큼 span 태그 생성 및 텍스트 저장
[...textArr].forEach((value,i)=>{
    const span=document.createElement('span');
    span.textContent=value;
    span.style.animationDelay=`${0.1 * i}s`;
    title.appendChild(span);
});

 

위 코드는 애니메이션 효과를 추가할 문자열을 선택한 다음 한 글자씩 분리하고 span 태그로 감싸서 다시 저장하는 코드이다.

만약 하나의 문장에만 애니메이션 효과를 주려면 여기서 끝내도 상관 없지만 여러개의 제목에 같은 효과를 주려면 아래 코드처럼 모든 제목들을 선택한 후 순회하도록 약간의 수정을 거치면 된다.

/* JavaScript */

// 애니메이션 효과를 적용할 모든 텍스트를 배열에 저장
const titles=document.querySelectorAll('h1');
const textArr=[];

// 선택된 모든 타이틀을 순회하며 내용을 span 태그로 채움
titles.forEach((title, idx)=>{
    textArr.push(title.textContent);
    
    // h1 태그를 span 태그로 채우기 위해 비움
    title.textContent="";
    
    // 텍스트 길이만큼 span 태그 생성 및 텍스트 저장
    [...textArr[idx]].forEach((value, i)=>{
        const span=document.createElement('span');
        span.textContent=value;
        span.style.animationDelay=`${0.1 * i}s`;
        title.appendChild(span);
    });
});