자바스크립트로 화창한 하늘 애니메이션 구현하기
오늘은 자바스크립트를 사용하여 화창한 하늘 애니메이션을 구현하는 방법에 대해 알아보겠습니다.
필요한 도구
- HTML
- CSS
- 자바스크립트
단계별 구현 절차
- HTML 구조 작성
- CSS 스타일 작성
- 자바스크립트로 애니메이션 구현
1. HTML 구조 작성
<!DOCTYPE html>
<html>
<head>
<title>화창한 하늘 애니메이션</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sky"></div>
<div class="sun"></div>
</body>
<script src="script.js"></script>
</html>
위의 코드에서는 하늘을 표현하기 위해 .sky 클래스로 된 div 요소와 해를 표현하기 위해 .sun 클래스로 된 div 요소를 사용하였습니다.
2. CSS 스타일 작성
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.sky {
position: fixed;
width: 100%;
height: 100%;
background-color: #00bfff;
transition: background-color 2s ease-in-out;
}
.sun {
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background-color: #ffd700;
border-radius: 50%;
animation: sun-rise 2s ease-in-out infinite alternate;
}
@keyframes sun-rise {
0% {
transform: translateX(-50%) translateY(-100%);
}
100% {
transform: translateX(-50%) translateY(-50%);
}
}
위의 CSS 코드에서는 body 요소의 여백을 없애고, overflow 속성을 hidden으로 설정하여 스크롤이 되지 않도록 했습니다. .sky 클래스는 fixed 위치로 고정되고, background-color 속성의 변화를 transition으로 애니메이션화 시켰습니다. .sun 클래스는 absolute 위치로 배치하고, transform을 통해 왼쪽으로 50% 이동 시킨 뒤 다시 왼쪽으로 50%만큼 이동시켜 가로 중앙에 표시되도록 했습니다. animation 속성을 사용하여 sun-rise라는 애니메이션을 적용하였습니다.
3. 자바스크립트로 애니메이션 구현
document.addEventListener("DOMContentLoaded", function() {
var sky = document.querySelector(".sky");
sky.addEventListener("mouseenter", function() {
sky.style.backgroundColor = "#87ceeb";
});
sky.addEventListener("mouseleave", function() {
sky.style.backgroundColor = "#00bfff";
});
});
위의 자바스크립트 코드는 .sky 클래스를 가진 요소를 선택한 뒤, 마우스가 해당 요소 위에 올라간 경우와 벗어난 경우에 각각 배경 색상을 변경하는 이벤트 핸들러를 추가하였습니다.
결론
이제 단계별로 화창한 하늘 애니메이션을 구현할 수 있게 되었습니다. 자바스크립트를 사용하여 요소의 스타일을 변경하고 이벤트를 처리하는 방법을 익혀보세요. 해와 하늘의 색상을 변경하는 것 외에도 다양한 애니메이션 효과를 추가할 수 있습니다. 즐겁게 코딩해보세요!