[javascript] 자바스크립트 타자기 효과로 글쓰기

참고: https://medium.com/@mignunez/how-to-easily-create-a-typewriter-effect-with-javascript-1e1d9ca05b59

TL;DR

전체 코드와 데모를 다음 codepen에서 확인할 수 있습니다.

See the Pen typewriter by shinyks (@shinyks) on CodePen.

HTML

타자기 효과를 내기 위해 필요한 것은 메시지를 표시할 요소만 있으면 됩니다.

<p id="message"><p>

CSS

먼저 문장의 마지막에 보일 깜빡이 효과를 만듭니다. 필수는 아니지만 타자기 효과를 더욱 사실적으로 보이게 해주기 때문에 적극 권장합니다. 깜빡이는 0.5 초 마다 opacity를 0으로 설정하는 애니메이션을 사용합니다.

span{
  animation: blinker 1s linear infinite;
}

@keyframes blinker{
  50%{
    opacity: 0;
  }
}

JavaScript

다음 변수를 생성합니다: message, speed, textPosition. 첫 번째 변수는 표시하려는 문자열을 가지는 배열입니다. 두 번째 변수는 타자기의 속도를 저장할 변수로 밀리초 단위로 지정합니다. 이는 숫자가 작을 수록 타자기는 더 빨리 입력되며 숫자가 커지면 타자기는 느려집니다. 세 번째 변수는 문자열에서 표시할 문자의 위치를 나타냅니다. 타자기의 첫 번째 문자 부터 출력되길 원하기 때문에 이 변수는 0으로 설정합니다.

const message = ["Lorem ipsum typing effect!"] 
const speed = 100
let textPosition = 0;

이제 typewriter 라는 이름의 함수를 만듭니다. 이 함수는 다음의 예제에서 볼 수 있듯이 내부에 querySelector()를 사용하여 HTML 파일의 요소에 접근하고 innerHTML을 사용해 문자열 및 깜빡이를 보여줍니다.

function typewriter() {
  document.querySelector("#message").innerHTML = message[0].substring(0, textPosition) + '<span>\u25AE</span>';
}

substring() 이라는 메소드를 사용한 것을 눈치챘을 것 입니다. 이 함수의 기능은 화면에 표시할 문자를 지정하는 것 입니다. 최초 실행 때는 substring() 메소드의 첫 번째와 두 번째 매개변수가 0 이기 때문에 문자열의 첫 번째 문자만 표시됩니다. 코드가 추가된 다음의 예를 보면 바로 다음 줄에서 textPosition 변수를 1씩 늘리고 setTimeout을 사용하여 typewriter 함수를 다시 호출합니다. 이 작업이 계속 수행되면 substring() 메소드는 문자를 하나씩 더 표시합니다. 이러한 과정을 통해 문자열을 타자기로 치는 듯한 효과를 보이게 할 수 있습니다.

function typewriter() {
  document.querySelector("#message").innerHTML = message[0].substring(0, textPosition) + '<span>\u25AE</span>';

  if(textPosition++ != message[0].length) {
    setTimeout(typewriter, speed);
  }
}

window.addEventListener("load", typewriter);

위 예제의 마지막 줄은 화면이 로드되면 타자기 효과를 시작하게 합니다.

관련 글

자바스크립트 querySelector 사용 방법

자바스크립트 setTimeout 사용 방법