javascript typed.js 사용법 텍스트 타이핑 효과

 

typed.js 타이핑

 

 

typed.js 버전은 2.1.0 사용했습니다.

아래 링크 들어가셔서 확인바랍니다.

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

https://mattboldt.com/demos/typed-js/

JavaScript Animated Typing with Typed.js | by Matt Boldt

 

html

<div class="typingTxt"></div>

 

css

body{
  background:#000;
  color:#fff;
}
.typingTxt{
  padding:50px 0 50px 50px;
  display:inline-block;
  font-size:80px;
}
.typed-cursor{
  display:inline-block;
  font-size:80px;
}

 

javascript

var typed = new Typed('.typingTxt', {
  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
  typeSpeed: 80, //타이핑속도
  backSpeed: 30, //백스페이스 속도
  smartBackspace: true,
  cursorChar: '|', //커서모양
  backDelay: 1000, //백스페이스 문자 지우기 전에 딜레이
});