자바스크립트 타이핑 효과

html, css 자기소개 페이지 만들고나서
JS로 타이핑 효과를 주어서 더 동적으로 만들고 싶었다.

자바스크립트 타이핑 효과
이분의 벨로그를 활용하여 나의 자기소개 페이지에 타이핑 효과를 구현할 수 있었다 :)

 

코드해석은 해석이 필요한 부분만 정리했다.

HTML코드 해석

  <span class="blink">|</span>

깜빡깜빡하는 효과를 주기위해 | 를 사용했다.

CSS코드 해석

.text_box .blink {
  animation: blink 0.5s infinite;
  font-size: 20px;
}

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

animation과 @keyframe의 이름은 blink로 같다.
같은 걸 바라보고 있다는 것을 의미한다.
animation의 이름은 @keyframe에서 애니메이션의 중간상태를 지정하기 위해 설정하는 것이다.

animation: blink 0.5s infinite;에 대해 설명하자면
animation: 이름 지속시간 반복 이다.
infinite는 무한반복을 나타낸다.

@keyframes는 애니메이션의 중간 상태를 정의해준다.
각 중간 상태는 특정 시점에 엘리먼트가 어떻게 보일지 나타낸다.
css스타일을 이용해 중간 상태에 어떻게 보일지 정의했다면
이 중간 상태가 전체 애니메이션에서 언제 등장할 지 from과 to로 사용할 수 있다.
from = 애니메이션이 시작된 시점에서
to = 애니메이션이 끝나는 시점으로

더 자세한 설명은 여기를 참고!

JS코드 해석

const content = "Hello, I'm JeongEun !"
const text = document.querySelector(".text");
let i = 0;

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

setInterval(typing,300);

먼저 content(내용)를 "Hello, I'm JeongEun !"로 하고싶어서 할당해주었다.
그 다음 content를 넣을 곳인 html의 .text도 가져왔고...

이제는 한글자 한글자 text안에 넣어주어야 한다.
그러기위해 반복문을 사용했다.
txt에 content의 0번째 인덱스인 H부터 차근차근 할당해줄거고
그 txt를 .text의 innerHTML에 하나하나 넣어주고
만약에 content의 길이보다 커져도 계속 반복하게 해야하니까
"" 후 다시 i = 0 부터 시작하게 무한반복루프를 사용했다..

어렵지만 계속 하다보면 익숙해지겠지..?

이후에는
자기소개 페이지의 첫 오픈 화면을 만들고
방명록처럼 댓글을 남길 수 있는 기능을 넣고싶다.