반응형
[JS] 자동으로 글자 적는 타이핑 효과 구현하기
JavaScript를 이용하여 간단한 typing 효과를 구현할 수 있습니다. 전체 코드 See the Pen Text Typing Effect by hyukson (@hyukson) on CodePen. 코드 풀이 텍스트가 입력될 요소를 하나 생성해줍니다. // 텍스트 요소 c
gurtn.tistory.com
const $text = document.querySelector(".text");
// 글자 모음
const letters = [
"HTML",
"CSS",
"JavaScript"
];
// 글자 입력 속도
const speed = 100;
let i = 0;
// 타이핑 효과
const typing = async () => {
const letter = letters[i].split("");
while (letter.length) {
await wait(speed);
$text.innerHTML += letter.shift();
}
// 잠시 대기
await wait(800);
// 지우는 효과
remove();
}
// 글자 지우는 효과
const remove = async () => {
const letter = letters[i].split("");
while (letter.length) {
await wait(speed);
letter.pop();
$text.innerHTML = letter.join("");
}
// 다음 순서의 글자로 지정, 타이핑 함수 다시 실행
i = !letters[i+1] ? 0 : i + 1;
typing();
}
// 딜레이 기능 ( 마이크로초 )
function wait(ms) {
return new Promise(res => setTimeout(res, ms))
}
// 초기 실행
setTimeout(typing, 1500);
Resources반응형