반응형
[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>결과값
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 초간단 미사일 피하기 게임 만들기 2 !! (0) | 2023.10.18 |
|---|---|
| [JavaScript] 자바스크립를 활용하여 숫자맞추기 게임 만들기 (up&down game) (0) | 2023.10.17 |
| [JavaScript] 자바스크립를 활용하여 input 태그안에 value 넣는 방법 !! (0) | 2023.07.11 |
| [JavaScript] 자바스크립와 CSS로 글자 입력효과 내는 방법 !! (0) | 2023.06.18 |
| [JavaScript & jQuery] 움직임, 입력이 없을 시 자동 새로고침&경로이동 하는 방법 !! (0) | 2023.06.17 |
댓글