ㅇㅅㅇ

[JS, JAVASCRIPT] 키보드 타이핑 효과를 주는 자바스크립트 라이브러리 TypeIt 본문

프로그래밍/JAVASCRIPT

[JS, JAVASCRIPT] 키보드 타이핑 효과를 주는 자바스크립트 라이브러리 TypeIt

소 아 2022. 6. 30. 15:43

유튜브를 둘러보다 발견한 자바스크립트 라이브러리 중 하나

 

키보드 타이핑 효과를 주는 자바스크립트 라이브러리 TypeIt

 

TypeIt

The most versatile JavaScript typewriter effect library on the planet.

www.typeitjs.com

 

공식문서에서 말하는 장점으로는

  • ~4kb의 저용량
  • 의존성 없음
  • 매우 유연한 API
  • SEO 친화적

을 들고 있다.

 

*기본사용방법

<html>
  <head></head>
  <body>
    <!-- 타겟팅할 TypeIt의 루트 요소 -->
    <span id="myElement"></span>

    <!-- 스크립트 소스. -->
    <script src="<https://unpkg.com/typeit@8.6.0/dist/index.umd.js>"></script>
    <script>
      new TypeIt("#myElement", {
        strings: "이거슨 기본작성방버어어어업!",
      }).go();
    </script>
  </body>
</html>

 

여기에 지우고 다시 입력되는 등등의  옵션도 추가할 수 있다.

참고할 결과물은 아래와 같다.

(코드펜에 더 좋은 예시가 많이 있으니 필요하면 그쪽을 참고하시길...)

 

 

*etc

공식문서 하단에 보면 개인 및 오픈소스에는 무료지만 상업적 이용은 유료라고 한다.

용도(?)에 맞춰 잘 사용하자.

 

알기만 하면 아쉬우니 포폴에 넣어볼 듯?ㅎ

저작자표시 (새창열림)

'프로그래밍 > JAVASCRIPT' 카테고리의 다른 글

json-server 설치 및 데이터 호출해보기  (0) 2022.08.14
[JS, JAVASCRIPT] Array 내장함수  (0) 2022.08.07
[JS, JAVASCRIPT] 변수와 변수 선언 방법(var, let, const)  (0) 2022.07.31
[JS, JAVASCRIPT] 스크롤을 부드럽게 이동시키기(scroll behavior: smooth)  (0) 2022.06.07
[JS, JAVASCRIPT] 모바일기기로 접속했을 경우, 모바일 페이지로 이동하기  (0) 2020.08.10
'프로그래밍/JAVASCRIPT' Related Articles more