snow-project.zip
0.00MB

 

js로 눈내리는 효과 구현

 

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snow Effect</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="app.js"></script>
</body>
</html>

 

js

setInterval(createSnow, 100);
function createSnow() {
const snow = document.createElement('i');
snow.classList.add('fas');
snow.classList.add('fa-snowflake');
snow.style.left = Math.random() * window.innerWidth + 'px';
snow.style.animationDirection = Math.random() * 3 + 2 + 's';
snow.style.opacity = Math.random();
snow.style.fontSize = Math.random() * 10 + 10 + 'px';
document.body.appendChild(snow);
setTimeout(() => {
snow.remove();
}, 5000);
}

 

css

* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: #144B98;
}
.fa-snowflake {
animation: fall 5s linear forwards;
color: #fff;
position: absolute;
}
@keyframes fall {
to {
transform: translateY(90vh);
}
}