자바스크립트로 별이 떨어지는 애니메이션 만들기

18 Oct 2023

javascript

별이 떨어지는 애니메이션은 웹사이트나 앱에 멋진 효과를 추가할 수 있는 재미있는 동적 요소입니다. 이번 튜토리얼에서는 자바스크립트를 사용하여 간단한 별이 떨어지는 애니메이션을 만들어보겠습니다.

HTML 준비하기

우선 별이 떨어지는 애니메이션을 표시할 HTML 요소를 준비해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>별이 떨어지는 애니메이션</title>
    <style>
        #stars {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .star {
            position: absolute;
            width: 3px;
            height: 3px;
            background-color: white;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="stars"></div>
    <!-- 다른 콘텐츠들 -->
</body>
</html>

위의 코드는 stars라는 id를 가진 div 요소를 추가하고, 스타일을 지정한 것입니다. 이 div는 별이 떨어지는 애니메이션을 표시하는 용도로 사용됩니다.

자바스크립트로 애니메이션 만들기

자바스크립트를 사용하여 별이 떨어지는 애니메이션을 만들어보겠습니다.

function createStar() {
    const star = document.createElement('div');
    star.className = 'star';

    // 화면 위에서 시작하도록 top 값을 지정합니다.
    star.style.top = '0';

    // 랜덤한 위치에서 시작하도록 left 값을 지정합니다.
    star.style.left = `${Math.random() * 100}%`;

    // 랜덤한 크기로 별의 크기를 조정합니다.
    const size = Math.random() * 2 + 1;
    star.style.width = `${size}px`;
    star.style.height = `${size}px`;

    // 별이 아래로 떨어지도록 애니메이션을 추가합니다.
    star.animate(
        [
            { top: '0' },
            { top: '100%' }
        ],
        {
            duration: Math.random() * 1000 + 5000, // 애니메이션 지속 시간은 5초에서 6초 사이로 지정합니다.
            easing: 'linear',
            delay: Math.random() * 2000 // 애니메이션의 시작을 랜덤으로 지연시킵니다.
        }
    ).onfinish = () => {
        // 애니메이션이 종료된 후에는 별을 제거합니다.
        star.remove();
    };

    return star;
}

function animateStars() {
    const starsContainer = document.getElementById('stars');

    setInterval(() => {
        const star = createStar();
        starsContainer.appendChild(star);
    }, 300); // 0.3초마다 별을 추가합니다.
}

animateStars();

위 코드는 createStar 함수를 통해 별을 생성하고, 애니메이션을 추가하는 로직을 담고 있습니다. animateStars 함수는 일정 간격으로 createStar 함수를 호출하여 별을 추가하는 역할을 합니다.

실행 결과 확인하기

모든 준비가 되었으니 이제 웹 브라우저에서 애니메이션을 확인해보겠습니다. HTML 파일을 열고, 별들이 떨어지는 모습을 살펴봅시다.

결론

이번 튜토리얼에서는 자바스크립트를 사용하여 별이 떨어지는 애니메이션을 만드는 방법을 알아보았습니다. 이를 응용하여 다양한 애니메이션 효과를 구현할 수 있으니 창의력을 발휘해 보세요!

#JavaScript #애니메이션