Coding/JavaScript

[JavaScript] 글자 타이핑 하는 효과 내는 방법 !! (Typed.js 라이브러리 활용)

포스트it 2023. 8. 5. 09:00
728x90
반응형

 

[JavaScript] 글자 타이핑 하는 효과 내는 방법 !! (Typed.js 라이브러리 활용)

아주 간단한 코드로 글자 효과를 아주 멋지게 내는 라이브러리가 있어서 들고 왔습니다 ㅎ

 

 예제코드
<!DOCTYPE html>
<html>
<head>
  <title>Typed.js Example</title>
  <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script></head>
<body>
  <h1><span id="typing-text"></span></h1>

  <script>
    var options = {
        strings: [
                "Python Django Developer.",
                "AI NLP Developer.",
                "AI Chatbot Soulution",
            ],
      typeSpeed: 50, // 한 글자당 타이핑 속도 (밀리초)
      backSpeed: 30, // 한 글자당 삭제 속도 (밀리초)
      loop: true, // 반복 여부
    };

    var typed = new Typed('#typing-text', options);
  </script>
</body>
</html>

결과값

P

728x90
반응형