타이핑 애니메이션 라이브러리 TypeIt

https://www.typeitjs.com/

TypeIt | The most versatile JavaScript typewriter effect library on the planet.

개인적인 용도로는 자유롭게 사용이 가능하다.

하지만 상업적인 용도로는 한 프로젝트만 사용시 9$, 프로젝트 수 제한없이 무제한으로 사용시 29$를 지불해야 한다.

 

 

CDN 코드

<script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js"></script>

 

기본 사용 예시 자바스크립트 코드

new TypeIt("#hero", {
  speed: 50,
  startDelay: 900,
})
  .type("the mot versti", { delay: 100 })
  .move(-8, { delay: 100 })
  .type("s", { delay: 400 })
  .move(null, { to: "START", instant: true, delay: 300 })
  .move(1, { delay: 200 })
  .delete(1)
  .type("T", { delay: 225 })
  .pause(200)
  .move(2, { instant: true })
  .pause(200)
  .move(5, { instant: true })
  .move(5, { delay: 200 })
  .type("a", { delay: 350 })
  .move(null, { to: "END" })
  .type("le typing utlity")
  .move(-4, { delay: 150 })
  .type("i")
  .move(null, { to: "END" })
  .type(' on the <span class="place">internet</span>', { delay: 400 })
  .delete(".place", { delay: 800, instant: true })
  .type('<em><strong class="font-semibold">planet.</strong></em>', {
    speed: 100,
  })
  .go();

 

1. 단순한 문장 타이핑 애니메이션

new TypeIt("#simpleUsage", {
    strings: "This is a simple string.",
    speed: 50,
    waitUntilVisible: true,
}).go();

2. 엔터키를 친 두 문장 타이핑 애니메이션

- 문장 사이에 , 를 치면 된다.

new TypeIt("#multipleStrings", {
  strings: ["This is a great string.", "But here is a better one."],
  speed: 50,
  waitUntilVisible: true,
}).go();

3. input type="text"와 label로 글자 쓰는 공간 안에다가 타이핑 애니메이션

new TypeIt("#formElement", {
  strings: "Alex MacArthur",
  waitUntilVisible: true,
}).go();

밑에 쭉 내려가보면 직접 내가 친 내용으로 애니메이션 코드를 짜준다.

- 뭔가를 타이핑 해봐라 를 쳤다.

new TypeIt("#element", { 
    lifeLike: false, 
    speed: 0 
})
	.type("ㅁ")
	.pause(90)
	.delete(1)
	.type("무")
	.pause(82)
	.delete(1)
	.type("뭐")
	.pause(97)
	.delete(1)
	.type("뭔")
	.pause(126)
	.type("ㄱ")
	.pause(69)
	.delete(1)
	.type("가")
	.pause(132)
	.delete(1)
	.type("갈")
	.pause(51)
	.delete(1)
	.type("가")
	.pause(1)
	.type("르")
	.pause(91)
	.delete(1)
	.type("를")
	.pause(14)
	.type(" ")
	.pause(371)
	.type("ㅌ")
	.pause(74)
	.delete(1)
	.type("타")
	.pause(86)
	.delete(1)
	.type("탕")
	.pause(67)
	.delete(1)
	.type("타")
	.pause(1)
	.type("이")
	.pause(112)
	.delete(1)
	.type("잎")
	.pause(43)
	.delete(1)
	.type("이")
	.pause(1)
	.type("피")
	.pause(90)
	.delete(1)
	.type("핑")
	.pause(58)
	.type(" ")
	.pause(129)
	.type("ㅎ")
	.pause(59)
	.delete(1)
	.type("해")
	.pause(96)
	.delete(1)
	.type("햅")
	.pause(127)
	.delete(1)
	.type("해")
	.pause(1)
	.type("보")
	.pause(101)
	.delete(1)
	.type("봐")
	.pause(124)
	.delete(1)
	.type("봘")
	.pause(43)
	.delete(1)
	.type("봐")
	.pause(1)
	.type("라")
	.go();

한글은 영어보다 훨씬 더 복잡한 것 같다...