[애니메이션] 타이핑 효과

html

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

css

/* 글자 우측 커서 효과 삽입 */
.text {
  display: table-cell;
  vertical-align: middle;
  border-right: 0.05em solid black;
  animation: cursor 0.5s ease infinite;
}

@keyframes cursor {
  50% {
    border-color: transparent;
  }
}

javascript

const content= "Typing Effect" // 사용할 문구
const text = document.querySelector('.text')
let index = 0; // 문자열 인덱스

const typing = () => {
    text.textContent += content[index++];
    if(index > content.length){
        text.textContent = "";
        index = 0;
    }
}
setInterval(typing, 500);

setInterval시간과 css의 animation시간을 일치시켜주어야 한다.

유노코딩