1. 눈송이 만들기
<title>Snow</title>
<style>
body {
background-color: #323455;
}
.snowflake {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
position: absolute;
top: -8px;
}
</style>
</head>
<body>
<div class = "snowflake"></div>
</body>
</html>
2. 눈송이 애니메이션 만들기
- fall 애니메이션
@keyframes fall {
from {
} /*시작할 위치*/
to {
transform: translateY(100vh); /*화면 끝까지 이동*/
opacity: 0;
}
}
- fall 애니메이션 snowflake에 추가
.snowflake {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
position: absolute; /*눈송이 감추기*/
top: -8px;
animation : fall 10s linear;
}
4. HTML 요소를 JS를 활용
- HTML <div class = " snowflake">
삭제 → (자바스크립트로 HTML요소 생성)
function makeSnowflake() {
const snowflake = document.createElement("div"); //div 요소 추가
snowflake.classList.add("snowflake"); // snowflake에 class 값 추가
}
5. 눈송이 떨어지는 장소 랜덤화
const body = document.querySelector("body"); //body불러오기
function makeSnowflake() {
const snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
snowflake.style.left = `${Math.random() * window.screen.width}px`;
//눈송이를 왼쪽으로 이동
body.appendChild(snowflake); //body에 눈송이 추가
}
6. makeSnowflake 함수 호출
for (let index = 0; index < 50; index++) {
makeSnowflake();
}
7. 눈송이 디테일 추가
- 눈송이들마다 애니메이션 지연
function makeSnowflake() {
const snowflake = document.createElement("div");
const delay = Math.random() * 10; //🟡
snowflake.classList.add("snowflake");
snowflake.style.left = `${Math.random() * window.screen.width}px`;
snowflake.style.animationDelay = `${delay}s`; //🟡
body.appendChild(snowflake);
}
- 깊이감 → 불투명도 무작위
function makeSnowflake() {
const snowflake = document.createElement("div");
const delay = Math.random() * 10;
const initialOpacity = Math.random(); //🟡
snowflake.classList.add("snowflake");
snowflake.style.left = `${Math.random() * window.screen.width}px`;
snowflake.style.animationDelay = `${delay}s`;
snowflake.style.opacity = initialOpacity; //🟡
body.appendChild(snowflake);
}
- 눈송이마다 지속시간 변경
css snowflake 애니메이션 삭제 → (JS로 눈송이 무작위 지속시간)
const MIN_DURATION = 10; //🟡 애니메이션 최소 지속 시간
function makeSnowflake() {
const snowflake = document.createElement("div");
const delay = Math.random() * 10;
const initialOpacity = Math.random();
const duration = Math.random() * 20 + MIN_DURATION; //🟡
snowflake.classList.add("snowflake");
snowflake.style.left = `${Math.random() * window.screen.width}px`;
snowflake.style.animationDelay = `${delay}s`;
snowflake.style.opacity = initialOpacity;
snowflake.style.animation = `fall ${duration}s linear`; //🟡
body.appendChild(snowflake);
8. 애니메이션 사라지면 페이지에서 제거
- 사라진 눈송이 흔적 제거(개발자 도구에서 확인 가능)
setTimeout(() => {
body.removeChild(snowflake);
}, (duration + delay) * 1000);
}
=> 무한한 눈송이 생성
setTimeout(() => {
body.removeChild(snowflake);
makeSnowflake(); //🟡
}, (duration + delay) * 1000);
}
- 눈송이 동시에 만들지 않고 약간의 지연 후 생성
for (let index = 0; index < 50; index++) {
setTimeout(makeSnowflake, 500 * index);
}
📌완성코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snow</title>
<style>
body {
background-color: #323455;
}
.snowflake {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
position: absolute;
top: -8px;
}
@keyframes fall {
from {
}
to {
transform: translateY(100vh);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
const body = document.querySelector("body");
const MIN_DURATION = 10;
function makeSnowflake() {
const snowflake = document.createElement("div");
const delay = Math.random() * 10;
const initialOpacity = Math.random();
const duration = Math.random() * 20 + MIN_DURATION;
snowflake.classList.add("snowflake");
snowflake.style.left = `${Math.random() * window.screen.width}px`;
snowflake.style.animationDelay = `${delay}s`;
snowflake.style.opacity = initialOpacity;
snowflake.style.animation = `fall ${duration}s linear`;
body.appendChild(snowflake);
setTimeout(() => {
body.removeChild(snowflake);
makeSnowflake();
}, (duration + delay) * 1000);
}
for (let index = 0; index < 50; index++) {
setTimeout(makeSnowflake, 500 * index);
}
</script>
</body>
</html
참고영상