javascript - type writing

마치 타자를 치고 있는 것처럼 글자가 하나씩 등장하는 타입 라이팅이다. 깜빡거리는 커서는 animation으로 해결 가능하다. 먼저 커서를 만들어보자!

html

 <div class="aboutme-content">
             <span>안녕하세요. 저는</span>
                  <div class="aboutme-typing"></div>
  </div>

CSS

.aboutme-content .aboutme-typing {
    position: relative;
    font-size: 25px;
}

.aboutme-content .aboutme-typing::before {
    content: "";
    height: 30px;
    width: 2px;
    position: absolute;
    right: -10px;
    top: 5px;
    background-color: white;
    animation: blink 1s infinite ease;
}

@keyframes blink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

글자가 나올 부분인 aboutme-typing에 relative를 주고::before 를 만든다. 그리고 animation을 만들면 끝! 이제 js로 넘어가자.

const aboutMe = document.querySelector(".aboutme-typing")

const texts = ["김동하 입니다.", "작가입니다.", "슈퍼 프리랜서를 꿈꿉니다.", "다정한 유용함을 좋아합니다."]

일단 aboutMe란 변수는 html에서 가져오고 texts 배열을 만들어 string을 담았다. 처음 생각할 때 for문을 써서 slice으로 가져오는 줄 알고 엄청 헤맸는데 for 문 없이도 가능하다.

const aboutMe = document.querySelector(".aboutme-typing")

const texts = ["김동하 입니다.", "작가입니다.", "슈퍼 프리랜서를 꿈꿉니다.", "다정한 유용함을 좋아합니다."]

let cnt = 0;
let index = 0;
let currentText = "";
let letter = ""

function type(){

        if(cnt === texts.length){
           cnt = 0;
         }
         
         currentText = texts[cnt]
         letter = currenText.slice(0, index++)
         aboutMe.currentText = letter
         if(letter.length === currentText.length){
            cnt++;
            index=0;
         }

  setTimeout(type, 600)
 
 }

type()

하나씩 살펴보자. 일단 변수 cnt 는 texts 배열 중 문장을 정할 때 쓴다. 그리고 index 는 정한 문장의 글자들을 가져오는 데 쓴다. currentText 는 cnt로 고른 배열 중 문장이고 letter는 그 문장을 slice해서 가져온 글자다.

type() 안에

        if(cnt === texts.length){
           cnt = 0;
         }

cnt가 배열의 전체 길이와 같아지면 cnt = 0이 되는데 cnt를 초기화시켜서 무한 순환하게 만든다.

         currentText = texts[cnt]
         letter = currenText.slice(0, index++)
         aboutMe.currentText = letter

현재 cnt와 index 모두 0이기 때문에 currentText는 "김동하 입니다."이다. 그리고 letter는 "김"이다. index++이므로 함수가 작동하면서 글자를 하나씩 더 해서 출력할 것이다.

          if(letter.length === currentText.length){
             cnt++;
             index=0;
         }

만약 첫 번째 문장이 끝났다면 다음 문장으로 넘어가야 한다. 즉, slice로 잘라낸 letter의 개수와 currentText의 길이가 같으면 마지막 글자까지 모두 출력한 것이다. 그러면 index를 초기화하고 cnt를 더한다. 그러면 이제 texts[1]이 되어 currentText는 다음 문장이 된다.

이제 가장 중요한 setTiemout. 가장 마지막에 setTimeout(type, 600) 이렇게 type함수를 0.6초마다 실행한다는 함수를 넣어준다. 그럼 마치 타이핑이 저절로 되는 것 같은 기분을 맛볼 수 있다.

출처 : https://www.youtube.com/watch?v=PuOGBacTYAY