자바스크립트로 단풍이 떨어지는 애니메이션 만들기
목차
소개
이번 포스트에서는 자바스크립트를 사용하여 단풍이 떨어지는 애니메이션을 만들어보겠습니다. 이 애니메이션은 웹 페이지에 재미와 아름다움을 더해줄 수 있는 효과적인 요소입니다.
구현 방법
다음은 단풍이 떨어지는 애니메이션을 구현하기 위한 단계입니다.
- HTML 파일을 생성하고 애니메이션을 보여줄 공간을 마련합니다.
- CSS를 사용하여 단풍을 스타일링하고 애니메이션을 설정합니다.
- 자바스크립트를 사용하여 애니메이션 효과를 제어합니다.
- 웹 페이지에 스크립트를 연결하여 애니메이션을 실행합니다.
코드 예시
다음은 단풍이 떨어지는 애니메이션을 만들기 위한 HTML, CSS 및 자바스크립트 코드의 예시입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.leaf {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="animation-container"></div>
<script>
function createLeaf() {
const leaf = document.createElement('div');
leaf.className = 'leaf';
leaf.style.left = Math.random() * window.innerWidth + 'px';
leaf.style.animationDuration = Math.random() * 2 + 1 + 's';
return leaf;
}
function startAnimation() {
const container = document.getElementById('animation-container');
setInterval(() => {
const leaf = createLeaf();
container.appendChild(leaf);
setTimeout(() => {
container.removeChild(leaf);
}, 3000);
}, 500);
}
startAnimation();
</script>
</body>
</html>
위의 코드는 단풍을 표현하기 위한 원형 모양의 div 요소를 생성하고 화면에 떨어지는 애니메이션 효과를 줍니다. 자바스크립트 함수를 사용하여 단풍이 랜덤한 위치에서 떨어지도록 하고 일정 시간이 지난 후에 삭제되도록 설정하였습니다.