[JavaScript] 글자 자동 타이핑 효과 구현하기

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

 

//HTML

<div>Language! <h1 class="text"></h1></div>

 

//CSS

div {
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.8rem;
}

h1 {
  font-size: 2.2rem;
  margin-left: .6rem;
}

h1::after {
  content: '';
  margin-left: .4rem;
  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; }
}

/* ------------ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;  
  font-family: Pretendard;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222;
  color: white;
}

 

//JS

const $text = document.querySelector(".text");

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

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

// 타이핑 효과
const typing = async () => {  
  const letter = letters[i].split("");
  
  while (letter.length) {
    await wait(speed);
    $text.innerHTML += letter.shift(); 
  }
  
  // 잠시 대기
  await wait(800);
  
  // 지우는 효과
  remove();
}

// 글자 지우는 효과
const remove = async () => {
  const letter = letters[i].split("");
  
  while (letter.length) {
    await wait(speed);
    
    letter.pop();
    $text.innerHTML = letter.join(""); 
  }
  
  // 다음 순서의 글자로 지정, 타이핑 함수 다시 실행
  i = !letters[i+1] ? 0 : i + 1;
  typing();
}

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

// 초기 실행
setTimeout(typing, 1500);

 

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

• 무한반복 막기

JS

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

 

코드 풀이

HTML

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

 

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

 

JS

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

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

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

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

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

 

JS

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

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

Promise를 이용해서 딜레이 기능을 주는 함수를 구현해주었다.

 

JS

// 타이핑 기능   ( 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 안에서 딜레이 시간이 생기게 만들어 준다.

 

JS

  ...

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

while문이 종료된 후 바로 지우는 효과가 실행되면, 텍스트를 읽을 시간이 없어진다.

다시 한번 wait 함수를 이용해서 다음 코드 실행에 딜레이를 준다.

 

이제 타이핑 기능을 통해서 글자가 작성되었으니 지우는 효과를 만들어야 한다.

글자를 지우면 그 자리를 다른 글씨가 대체해야 하므로, 

다음에 작성될 텍스트가 있을 때 지우는 효과를 실행하도록 조건문을 걸어주었다.