자바스크립트 애니메이션 프레임을 활용한 타이핑 효과 애니메이션 만들기

18 Oct 2023

javascript

이번에는 자바스크립트 애니메이션 프레임을 활용하여 타이핑 효과 애니메이션을 만들어보겠습니다. 이 애니메이션은 화면에 텍스트를 한 글자씩 나타나게 하는 효과로, 웹사이트나 앱에서 사용자에게 보다 동적이고 흥미로운 컨텐츠를 제공할 수 있습니다.

필요한 기술 및 도구

이번 튜토리얼에서는 다음과 같은 기술 및 도구를 사용합니다:

HTML
CSS
자바스크립트

코드 예제

아래는 타이핑 효과 애니메이션을 구현하기 위한 코드 예제입니다.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>타이핑 효과 애니메이션</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1 id="typing-text"></h1>

    <script src="script.js"></script>
</body>
</html>

CSS

#typing-text {
    font-size: 24px;
    font-family: Arial, sans-serif;
    text-align: center;
}

자바스크립트

var text = "안녕하세요! 타이핑 효과 애니메이션입니다.";
var delay = 100; // 각 글자가 나타나는 딜레이(ms)

var index = 0;

function typingEffect() {
    if (index < text.length) {
        document.getElementById("typing-text").innerHTML += text.charAt(index);
        index++;
        setTimeout(typingEffect, delay);
    }
}

typingEffect();

위의 코드 예제에서는 HTML 파일에서 typing-text라는 id를 가진 h1 요소를 생성하고, CSS를 사용하여 해당 요소의 스타일을 설정합니다. 자바스크립트 파일에서는 text 변수에 나타낼 텍스트를 저장하고, delay 변수에 각 글자가 나타나는 딜레이 시간을 저장합니다. typingEffect 함수는 타이핑 효과 애니메이션을 구현하는 함수로, 해당 함수는 setTimeout 함수를 사용하여 딜레이 후에 다시 자신을 호출합니다.

실행 결과

위의 코드를 실행하면, 로딩 후에 화면에 “안녕하세요! 타이핑 효과 애니메이션입니다.”라는 텍스트가 한 글자씩 나타나는 타이핑 효과 애니메이션을 확인할 수 있습니다.

결론

이번 튜토리얼에서는 자바스크립트 애니메이션 프레임을 활용하여 타이핑 효과 애니메이션을 만드는 방법에 대해 알아보았습니다. 이런 타이핑 효과 애니메이션을 웹사이트에 적용함으로써 사용자에게 더욱 동적이고 흥미로운 경험을 제공할 수 있습니다. 자유롭게 코드를 수정하고 스타일을 변경하여 원하는 대로 애니메이션을 만들어보세요!