[JS] 자동으로 글자 적는 타이핑 효과 구현하기

 

JavaScript를 이용하여 간단한 typing 효과를 구현할 수 있습니다.

 

예시 코드

위 예시코드는 동작을 보여주기 위해서 무한 반복하고 있습니다. 참고해주세요!

• 무한반복 막기

// 지우는 효과
if (letters[i + 1]) remove();

 

코드 풀이

<h1 class="text"></h1>

텍스트가 입력될 요소를 하나 생성해줍니다.

 

// 텍스트 요소
const $text = document.querySelector(".text");

// 입력될 글자 모음
const letters = ["HTML", "CSS", "JavaScript"];

// 글자 입력 속도
const speed = 100;

// 현재 지정된 글자
let i = 0;

타이핑 효과를 구현하기 위해서 필요한 기본 요소 및 설정 값들을 선언해줍니다.

 

// 딜레이 기능 ( 마이크로초 )
function wait(ms) {
  return new Promise(res => setTimeout(res, ms))
}

텍스트가 작성되는 속도나 작성되고 텍스트가 멈추는 시간을 구현하기 위해서 setTimeout 함수로 딜레이를 주고, Promise를 이용해서 딜레이 기능을 주는 함수를 구현해주었습니다.

 

// 타이핑 기능   ( wait 기능을 위한 async, await )
const typing = async () => {
  const letter = letters[i].split("");
  
  while (letter.length) {
    // 글자 작성 속도 조절
    await wait(speed);
    $text.innerHTML += letter.shift(); 
  }
  
  // 작성 된 후 잠시 멈추기
  await wait(800);
  
  // 다음에 작성될 글자가 있을 시 지우는 효과 실행
  if (letters[i + 1]) remove();
}

작성할 글자를 모아둔 배열에서 i번째 글자를 가져와 문자열을 배열로 나눠줍니다.

 

모든 문자가 텍스트 요소에 추가되면 종료되는 while 문을 작성해줍니다. 배열로 나눈 입력될 문자에서 shfit 메서드를 이용해서 배열의 제일 앞에 있는 값을 뽑아줍니다.

 

$text.innerHTML 속성을 이용해서 딜레이와 하나씩 추가되는 기능을 통해 타이핑되는 효과를 구현하였습니다.

wait 함수를 이용해서 while 안에서 딜레이 시간이 생기게 만들어 줍니다.

 

  ...

  // 작성 된 후 잠시 멈추기
  await wait(800);
  
  // 다음에 작성될 글자가 있을 시 지우는 효과 실행
  if (letters[i + 1]) remove();
}

while문이 종료된 후 바로 지우는 효과가 실행되면, 텍스트를 읽을 시간이 없어집니다. 다시 한번 wait 함수를 이용해서 다음 코드 실행에 딜레이를 줍니다.

 

이제 타이핑 기능을 통해서 글자가 작성되었으니 지우는 효과를 만들어야 합니다. 글자를 지우면 그 자리를 다른 글씨가 대체해야 하므로, 다음에 작성될 텍스트가 있을 때 지우는 효과를 실행하도록 조건문을 걸어주었습니다.

 

// 글자를 지우는 효과
const remove = async () => {
  const letter = letters[i].split("");
  
  while (letter.length) {
    await wait(speed);
    
    letter.pop();
    $text.innerHTML = letter.join(""); 
  }
  
  // 다음 순서의 글자로 변경
  i++;
  // 다시 타이핑 시작
  typing();
}

글자를 지우는 효과 또한 타이핑 기능과 비슷합니다. 타이핑 기능과의 차이점으로는 글자를 innerHTML를 이용해서 추가시키는 것이 아닌 대체해주어야 합니다.

 

다시 한번 letter 변수에 작성될 글자를 가져와 선언해줍니다. 이번엔 pop 메서드를 이용해서 뒷 문자를 뽑아 버려 주고, 남은 글자들을 다시 문자열로 합친 뒤에 뒷 글자가 사라진 문자로 글자를 대체시켜줍니다.

 

커서 기능 구현

.text::after {
  content: '';
  margin-left: .6rem;
  border-right: 2px solid #777;
  animation: cursor .9s infinite steps(2);
}

@keyframes cursor {
  from { border-right: 2px solid #222; }
  to { border-right: 2px solid #777; }
}

border-right 속성을 이용해서 타이핑되는 요소 오른쪽에 막대기를 생성해줍니다. animation 속성과 @keyframes을 이용해 border 색상이 바뀌는 애니메이션 효과를 제작해줍니다.

 

줄바꿈 타이핑

 

// 줄바꿈을 위한 <br> 치환
const changeLineBreak = (letter) => {
  return letter.map(text => text === "\n" ? "<br>" : text);
}

// 기존에서 변경된 코드
const typing = async () => {  
  // 기존코드에서 개행치환코드 추가
  const letter = changeLineBreak(letters[i].split(""));
  
  ...

줄바꿈 타이핑을 구현하기 전에 HTML DIV상에서 개행 문자로 줄바꿈이 불가능하며, "<br>" 태그를 이용해서 줄바꿈 시켜줘야 합니다.

 

개행 문자를 "<br" 태그로 바꿔주는 코드를 추가해줌으로써 간단하게 구현할 수 있습니다.