[CSS] 타이핑 치는 효과를 주는 CSS

안녕하세요. J4J입니다.

 

이번 포스팅은 타이핑 치는 효과를 주는 CSS에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

타이핑 치는 CSS

 

타이핑 치는 효과를 주는 방법에 대해 궁금증이 생겨 검색을 해봤을 때 정말 다양한 방법들을 발견할 수 있었습니다.

 

제가 해보고자 했던 것은 개행이 존재하는 장문의 글에 대해 타이핑 효과를 주며 화면에 보이게 하는 것이었는데 마땅한 레퍼런스를 찾지 못하다가 이런 방법도 있겠구나라는 생각을 가지며 한 번 구현해봤습니다.

 

 

 

기본적으로 해당 방법에서 메인 역할을 하는 것은 setInterval입니다.

 

조건에 도달할때까지 주기적으로 계속 반복하며 글자들을 하나씩 담아내는 방법을 사용해 봤습니다.

 

See the Pen 타이핑 효과 by 김 성찬 (@ksccmp) on CodePen.

 

 

반응형

 

 

개행같은 경우는 입력되고 싶은 내용에 개행 문자를 삽입해줬고 interval단계에서 개행 문자를 확인하게 되면 <br /> 태그를 삽입해줬습니다.

 

내용이 모두 입력되어 interval을 종료시키고 싶을 때는 interval내부에서 index와 contents의 길이를 비교하여 종료하게 만들었습니다.

 

또한 button을 반복적으로 누를 경우 기존 데이터가 겹치는 상황을 방지하기 위해 버튼을 클릭할때마다 interval을 종료해주는 코드도 넣어줬습니다.

 

 

 

 

 

이상으로 타이핑치는 효과를 주는 CSS에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.