[자바스크립트] TypeIt 사용해서 타이핑 애니메이션 효과 내기 (사용법, 예제, 콜백)

아래 소스 코드는 TypeIt 라이브러리를 사용해서 텍스트에 타이핑하는 효과를 나타냈습니다. 지정된 HTML 요소에 타이핑 애니메이션을 생성하고 제어하는 데 사용됩니다.

 

소스코드

new TypeIt("#typeit-demo1", {
    // 설정 옵션들
})

 

ㅇ TypeIt 라이브러리를 초기화하고 #typeit-demo1이라는 HTML 요소에 타이핑 애니메이션을 적용하는 설정을 시작합니다.

 

{
    speed: 100, // 글자가 타이핑되는 속도 (밀리초)
    waitUntilVisible: true, // 요소가 화면에 나타날 때까지 대기 여부
    afterComplete: function (instance) {
        // 타이핑 애니메이션이 완료된 후에 실행되는 콜백 함수
        document.getElementById("typeit-demo1").style.color = "blue";
        document.getElementById("typeit-demo1").style.fontWeight = "bold";
    }
}

 

ㅇ speed: 100 : 글자가 타이핑되는 속도를 나타냅니다. 값은 밀리초 단위로 지정되며, 100 밀리초마다 한 글자씩 타이핑됩니다.
ㅇ waitUntilVisible: true : 이 설정이 true로 설정되면, 요소가 화면에 나타날 때까지 대기하고 타이핑 애니메이션을 시작합니다.
ㅇafterComplete: function (instance) { ... } : 타이핑 애니메이션이 완료된 후에 호출되는 콜백 함수를 정의합니다. 이 콜백 함수에서는 document.getElementById를 사용하여 typeit-demo1 요소의 스타일을 변경합니다. 타이핑 애니메이션이 완료되면 텍스트의 색상을 파란색으로 변경하고 글꼴의 두껍기 속성을 활성화합니다.

 

new TypeIt("#typeit-demo2", {
    strings: "안녕하세요, TypeIt 예제입니다. 반가워요. 좋은하루 되세요.",
    speed: 100,
    waitUntilVisible: true,
    startDelay: 1000,
    cursor: true,
    lifeLike: true,
    breakBefore: [" ",",",":",";"],
    breakDelay: 500,
    keyboard: true,
    beforeString: function (step, instance) {
        console.log("타이핑 애니메이션 시작 전에 실행됩니다.");
        // 타이핑 애니메이션이 완료된 후에 스타일 변경
        document.getElementById("typeit-demo2").style.color = "black";
        document.getElementById("typeit-demo2").style.fontWeight = "bold";
    },
    afterComplete: function (instance) {
        console.log("타이핑 애니메이션 완료!");
        // 타이핑 애니메이션이 완료된 후에 스타일 변경
        document.getElementById("typeit-demo2").style.color = "red";
        document.getElementById("typeit-demo2").style.fontWeight = "bold";
    },
    loop: true,
    loopDelay: 1000
}).go();

 

ㅇstrings : 타이핑 애니메이션에 사용 될 문자열입니다.
ㅇstartDelay: 1000 : 타이핑 애니메이션 시작 전에 1초 동안 대기합니다.
ㅇcursor: true : 커서(깜박이는 줄 표시기)를 활성화합니다.
ㅇlifeLike: true : 텍스트가 더 자연스럽게 타이핑되는 효과를 적용합니다.
ㅇbreakBefore : 지정된 문자 앞에 줄 바꿈을 추가합니다.
ㅇbreakDelay : 500: 문자 간의 일시 중지 시간을 500 밀리초(0.5초)로 설정합니다.
ㅇkeyboard: true : 마치 키보드 입력처럼 타이핑되는 효과를 추가합니다.
ㅇbeforeString 콜백 함수 : 타이핑 애니메이션 시작 전에 실행되며, 텍스트 색상을 검정색으로 변경하고 글꼴의 두껍기 속성을 활성화합니다.
ㅇafterComplete 콜백 함수 : 타이핑 애니메이션이 완료된 후에 호출되며, 텍스트 색상을 빨간색으로 변경하고 글꼴의 두껍기 속성을 활성화합니다.
ㅇloop: true: 애니메이션을 루프합니다.
ㅇloopDelay: 1000: 루프 사이의 대기 시간을 1초로 설정합니다.

---

<script src="https://cdn.jsdelivr.net/npm/typeit@6.0.0/dist/typeit.min.js"></script>

<h1 id="typeit-demo1"></h1>
<h1 id="typeit-demo2"></h1>

<script>
//첫 번째 요소
new TypeIt("#typeit-demo1", {
	speed: 100,
	waitUntilVisible: true,
	afterComplete: function (instance) {
		// 타이핑 애니메이션이 완료된 후에 스타일 변경
		document.getElementById("typeit-demo1").style.color = "blue";
		document.getElementById("typeit-demo1").style.fontWeight = "bold";
	}
})
.type("안녕하세요, TypeIt 예제입니다.")
.pause(500)
.break()
.type("좋은 하루 되세요.")
.go();

//두 번째 요소
new TypeIt("#typeit-demo2", {
	strings: "안녕하세요, TypeIt 예제입니다. 반가워요. 좋은하루 되세요.",
	speed: 100,
	waitUntilVisible: true,
	startDelay: 1000,
	cursor: true,
	lifeLike: true,
	breakBefore: [" ",",",":",";"],
	breakDelay: 500,
	keyboard: true,
	beforeString: function (step, instance) {
		console.log("타이핑 애니메이션 시작 전에 실행됩니다.");
		// 타이핑 애니메이션이 완료된 후에 스타일 변경
		document.getElementById("typeit-demo2").style.color = "black";
		document.getElementById("typeit-demo2").style.fontWeight = "bold";
	},
	afterComplete: function (instance) {
		console.log("타이핑 애니메이션 완료!");
		// 타이핑 애니메이션이 완료된 후에 스타일 변경
		document.getElementById("typeit-demo2").style.color = "red";
		document.getElementById("typeit-demo2").style.fontWeight = "bold";
	},
	loop: true,
	loopDelay: 1000
}).go();
</script>

 

---

소스코드 실행 화면