자바스크립트로 텍스트 글자 떨어지는 애니메이션 구현하기

18 Oct 2023

javascript

텍스트 글자가 화면 위에서 아래로 떨어지는 애니메이션은 웹페이지에 동적인 효과를 줄 수 있는 멋진 방법 중 하나입니다. 이번 튜토리얼에서는 자바스크립트를 사용하여 이런 효과를 구현하는 방법에 대해 알아보겠습니다.

HTML 구조 작성

먼저, 텍스트를 담을 div 요소를 만들어야 합니다. 아래와 같이 HTML 구조를 작성하세요.

<!DOCTYPE html>
<html>
<head>
    <title>텍스트 애니메이션</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 id="text">안녕하세요!</h1>
    </div>

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

CSS 스타일 작성

다음으로, 텍스트에 적용할 CSS 스타일을 작성해야 합니다. 아래와 같이 CSS 파일을 만들고 텍스트의 초기 위치 및 애니메이션 효과를 설정하세요.

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#text {
    font-size: 48px;
    animation: fall 3s ease infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

자바스크립트로 애니메이션 제어

마지막으로, 자바스크립트를 사용하여 애니메이션을 제어해야 합니다. 스크립트 파일을 만들고 아래 코드를 추가하세요.

window.addEventListener('DOMContentLoaded', function() {
    var textElement = document.getElementById('text');

    // 텍스트가 떨어지는 애니메이션
    function startAnimation() {
        textElement.style.animationPlayState = 'running';
    }

    // 페이지가 로드되면 애니메이션을 시작
    startAnimation();
});

이제 웹페이지를 열어보세요. 텍스트가 화면 위쪽에서 아래쪽으로 떨어지는 애니메이션을 볼 수 있습니다.

텍스트 애니메이션을 구현하는 데 자바스크립트를 사용했습니다. CSS의 @keyframes 방식을 이용하여 텍스트를 위아래로 이동시키는 애니메이션 효과를 만들었습니다.

이 방법을 응용하여 다양한 애니메이션 효과를 구현할 수 있으니 창의적인 아이디어를 발휘하여 멋진 애니메이션을 만들어보세요!

결론

이번 튜토리얼에서는 자바스크립트를 사용하여 텍스트 글자가 떨어지는 애니메이션을 구현하는 방법에 대해 알아보았습니다. 자바스크립트와 CSS를 조합하여 웹페이지에 동적인 효과를 추가할 수 있습니다. 이러한 애니메이션 효과는 사용자들에게 더 흥미로운 웹 경험을 제공할 수 있으니 창의적으로 활용해보세요.

#자바스크립트 #애니메이션