javascript snow (눈내리는 효과)
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);
}
}
'ETC > Sample' 카테고리의 다른 글
| 네이버 검색광고 API를 node.js를 통해 호출 (naver ad api, express, node.js) (0) | 2022.10.22 |
|---|---|
| javascript calculator (계산기) (0) | 2021.04.21 |
| javascript metronome (자바스크립트 메트로놈) (0) | 2021.04.14 |
| javascript vimeo thumbnail (자바스크립트로 비메오 썸네일 가져오기) (0) | 2021.04.12 |
| javascript youtube thumbnail (자바스크립트로 유튜브 썸네일 가져오기) (0) | 2021.04.11 |