Javascript (자바스크립트) 활용 - 타이팅 효과(텍스트 입력)

특정한 영역에서 텍스트 효과를 눈에 띄게 보이게 하기 위해서 텍스트가 입력되는 형태의 타이핑 효과를 자바스크립트를 이용해서 구현할 수 있다. 

 

1. 스크립트 작성

구글링을 해보면 한 줄/여러 줄일 경우를 나눠서 타이핑 효과 스크립트를 다르게 작성하는데

작업을 하다보면 한 줄 혹은 여러 줄로 수정이 많이 발생할 수 있기 때문에 여러 줄 기준으로 스크립트를 작성해놓고 그 때 그 때 맞춰서 텍스트만 수정해주는게 좋아 여러 줄 기준으로 스크립트를 작성했다.

 

아래 소스의 변수들을 간략히 설명하면

 

- txtString : 내가 작성할 문자열 (두 줄로 입력할 경우 문자열에 \n 기호 입력)

- txtSpeed : 타이핑 속도를 조절할 숫자

- txtDelay : 타이핑 완료 후 새로 입력되는데까지 대기 시간

- txtIndex : 타이핑 되는 현재의 문자열 index

- *typeControl : 타이핑 완료 후에 타이핑을 멈추게 하기 위해 on/off 기능을 위한 변수

- *txtNow : txtIndex를 setInterval을 돌리면서 하나씩 증가시켜 txtString에 작성했던 문자열을 하나씩 받아온다. 추가로 받아오는 문자열에 \n (줄바꿈) 특수기호가 있으면 <br> 태그를 입력해준다.

const txtWrap = document.querySelector('.typing');
const txtString = '안녕하세요! \n Hello World!';
const txtSpeed = 300;
const txtDelay = 2000;
let txtIndex = 0;
let typeCotrol = true;

function typingEvent(){
    if(typeCotrol === true){  // true일 경우 타이핑 진행, false일 경우 타이핑 중지
        let txtNow = txtString[txtIndex++];
        txtWrap.innerHTML += txtNow === "\n" ? "<br>": txtNow;
        if(txtIndex >= txtString.length){  // 문자열 index와 문자열 length를 비교해 문자열 마지막을 판별
            txtIndex = 0;  // 문자 입력을 다 하면 index를 0으로 초기화
            typeCotrol = false;  // 입력 완료시 typeControl을 false로 바꿔 입력 막기
        }
    }else{
        // typeControl이 false일 경우
        clearInterval(setTyping);  // setInterval 제거 (타이핑 멈춤)
        setTimeout(function(){
            txtWrap.innerHTML = '';
            typeCotrol = true;
            setTyping = setInterval(typingEvent, txtSpeed);  // txtDelay만큼 시간 후 재 입력
        }, txtDelay)
    }
}

let setTyping = setInterval(typingEvent, txtSpeed);  // setInterval을 통한 텍스트 입력

 

기본적으로 setInterval을 통해 인덱스를 증가시켜 변수로 담아놓을 문자열을 하나씩 받아온다.

이 때 주의해야할 점은 

txtWrap.innerHTML = 문자열이 아니라

txtWrap.innerHTML += 문자열 로 작성해야 문자열이 하나씩 추가가 된다. (+=)

 

 

2. CSS 작성

단순 텍스트 입력만 구현하는 것 보다 실제 텍스트를 입력하는 것 같이 깜빡이는 커서 효과도 줄 수 있다.

.typing:after  {
  display:inline-block;
  margin-left:2px;
  vertical-align:middle;
  content:'';
  background:#000;
  width:2px;
  height:22px;
  animation:blink infinite 1s ease;
}

@keyframes blink {
  0%	{opacity:0;}
  100%	{opacity:1;}
}

 

위와 같이 가상 선택자 after를 사용해서 임의의 바(bar)를 만들고

animation을 사용해서 깜빡임 효과를 주면 보다 리얼하게 텍스트 입력 효과를 만들 수 있다.

 

 

 

예시 화면

 

See the Pen Typing by KK (@hyunjin-k) on CodePen.