Typed.js - 키보드 타이핑 효과 자바스크립트 라이브러리

 

 

Typed.js는 입력한 문자열을 설정한 시간에 맞춰 직접 입력하는듯한 느낌으로 작성을 반복해주는 기능의 JavaScript Library 입니다.

흔히 말하는 타이핑 효과를 자바스크리븥로 쉽게 구현할 수 있게 도와줍니다.

 

 

 

(1) 설정하기

 

CDN 방식

 아래 코드를 문서의 닫는 body 태그 위에 작성합니다.

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

 

파일을 직접 첨부하고 싶다면 공식 페이지에서 다운받아 이용하시면 됩니다.

 

Typed.js Github > 

 

 

 

(2) JavaScript 코드 작성

 

기본형은 다음과 같습니다.

/* ===== typing animation ===== */
let typed = new Typed(".typing", {
  strings: ["", "Web Designer", "Web Developer", "Graphic Designer", "YouTuber", "Bloger"],
  typeSpeed: 100,
  BackSpeed: 60,
  loop: true
})

strings의 배열을 원하는대로 작성해주면 되고, 아래쪽의 추가 옵션으로 타이핑 스피드와, 삭제 속도, 반복여부 등을 설정할 수 있습니다.

 

Typed.js All view Demos >

Typed.js Full Docs >