재우니의 블로그

javascript 타이핑 typeitjs 라이브러리 (개인무료, 상용시 유료)

 

 

 

typeitjs.com/

 

TypeIt

The most versatile JavaScript animated typing utility on the planet.

typeitjs.com

 

TypeIt 샘플 예제

The most versatile animated typing utility on the planet.|
new TypeIt("#hero", {
  speed: 50,
  startDelay: 900
})
  .type("the mot versti", {delay: 100})
  .move(-8, {speed: 25, delay: 100})
  .type('s')
  .move('START')
  .move(1, {delay: 200})
  .delete(1)
  .type('T')
  .move(12, {delay: 200})
  .type('a', {delay: 250})
  .move('END')
  .type('le animated typing utlity')
  .move(-4)
  .type('i')
  .move('END')
  .type(' on the internet', {delay: 400})
  .delete(8, {delay: 600})
  .type('<em><strong>planet.</strong></em>');
  .go();

 

사례

new TypeIt('#typeTxt',{
    speed: 50,
    deleteSpeed: 0,
    loop: true
})
.type('하늘 위에 떠있는<br>별을 클릭해보세요.<br>하나하나의 소중한 사연이<br>담겨 있습니다.', {delay: 500})
.delete()
.type('하늘 위에 떠있는<br>별을 클릭해보세요.<br>하나하나의 소중한 사연이<br>담겨 있습니다.', {delay: 500})
.go();

 

사용법

<html>
  <head></head>
  <body>
    <!-- A root element for TypeIt to target. --> 
    <span id="myElement"></span>

    <!-- The script itself, loaded AFTER your root element. -->
    <script src="https://cdn.jsdelivr.net/npm/typeit@7.0.4/dist/typeit.min.js"></script>
    <script>
      new TypeIt('#myElement', {
        strings: "This is what will be typed!"
      }).go();
    </script>
  </body>
</html>