외부 라이브러리 - typed.js

typed.js

화면에 타자처럼 타이핑 애니메이션 효과를 주는 라이브러리

 

공식 홈페이지

https://mattboldt.github.io/typed.js/

 

 

JQuery 필요

# 0) JQuery 
npm i --save-dev @types/jquery
npm i @types/jqueryui

 

설치 및 import

# type.js : 화면에 타자처럼 타이핑 애니메이션 효과를 주는 lib
# => npm 설치 
npm install typed.js

# 2-1) typed.js import 방법
import Typed from 'typed.js'

 

< 간단한 예제 >

정의

/src/assets/initMain.ts

// initMain.ts
import Typed from "typed.js";

export default function initMain() {

    // TODO : 3) typed lib
    // 사용법 : new Typed(선택자 , {옵션})
    let typed1 = document.querySelector("#typed1");
    // typed1 이 있으면 타이핑 객체 생성
    if(typed1 != null) {
        new Typed("#typed1",{
            strings: ["원하는 글씨를", "순서대로", "출력해 줍니다."], // 타이핑 대상 글자 (배열형태)
            typeSpeed: 100, // 타이핑 되는 속도
            backSpeed: 100, // 지워지는 속도
            cursorChar: "_", // 커서
            loop: true,      // 글자 순환
        })
    }


}

 

컴포넌트

// TypedCom.tsx
import React, { useEffect } from 'react'
import initMain from '../assets/js/initMain'

function TypedCom() {
  useEffect(()=>{
    initMain();
  },[])
  return (
    <div>
      <span id="typed1">

      </span>
    </div>
  )
}

export default TypedCom