자바스크립트와 CSS로 타이핑효과 구현

어떤 기능을 추가로 구현해볼까, 하다가
사전스터디때 배웠던 내용을 응용해보는게 좋을것 같아서 선택했다.

const content = "타이핑 효과를 주고싶은 문구"
const text = document.querySelector(".text")
let index = 0;

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

setInterval(typing, 185) /* (주기적으로 동작하고자 하는 함수이름, 동작 주기 - ms단위) */

지정된 인덱스 번호부터 텍스트에 컨텐츠를 추가하는 내용의 함수를 작성했고,
if문을 통해 컨텐츠의 길이만큼 인덱스가 도달했을경우
텍스트 컨텐츠는 지우고, 0번째 인덱스부터 다시 리셋되게했다.
시간 간격을두고 문자가 하나하나씩 추가되게 만들기 위해 setInterval 함수도 이용했다.

글자만 타이핑되면 심심하니 CSS를 이용하여 커서도 만들어보자.

@keyframes cursor {
  50%{ border-color: transparent; }
  
.text{
  font-size: 15px;
  display: table-cell; vertical-align: middle;
  border-right: .08em solid black;
  animation: cursor 0.7s ease infinite;
} 

검은색과 50% 투명인 border를 만들어 애니메이션 효과를 주면 된다.

그리고 CSS와 JS를 연결해주면 끝!

    <h1 class = "text"></h1>
    <script src="script.js"></script>

참고 / 유노코딩 유튜브
https://www.youtube.com/watch?v=H1723LKnthk